@extends('bo.layouts.simple')

@section('title', 'Connexion BO Admin · LineUp France')

@section('css')
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('css/lineup-shared.css') }}">
    <link rel="stylesheet" href="{{ asset('css/lineup-auth-shared.css') }}">
@endsection

@section('content')
    <div class="lu-auth-page">
        <div class="lu-auth-wrap">
            <div class="lu-auth-card">
                <div class="lu-auth-brand">
                    <img src="{{ asset('images/lineup-logo.png') }}" alt="LineUp France">
                    <span>LineUp France</span>
                </div>
                <span class="lu-auth-kicker">Administration BO</span>
                <h1 class="lu-auth-title">Authentification BO</h1>
                <p class="lu-auth-subtitle">Connexion administrateur du back-office.</p>

                @if ($errors->any())
                    <div class="lu-alert lu-alert-danger">
                        {{ $errors->first() }}
                    </div>
                @endif

                <form method="POST" action="{{ route('bo.login.perform') }}">
                    @csrf
                    <div class="lu-form-group">
                        <label class="lu-label" for="bo-email">E-mail administrateur</label>
                        <input id="bo-email" type="email" class="lu-input" name="email" value="{{ old('email') }}" required autocomplete="username">
                    </div>
                    <div class="lu-form-group">
                        <label class="lu-label" for="bo-password">Mot de passe</label>
                        <input id="bo-password" type="password" class="lu-input" name="password" required autocomplete="current-password">
                    </div>
                    <label class="lu-check" for="bo-remember">
                        <input type="checkbox" value="1" id="bo-remember" name="remember">
                        Se souvenir de moi
                    </label>

                    <div class="lu-auth-actions">
                        <button type="submit" class="lu-btn lu-btn-primary">
                            <i class="fa fa-fw fa-sign-in-alt opacity-50 me-1"></i> Se connecter
                        </button>
                        <a href="{{ url('/') }}" class="lu-btn lu-btn-soft">
                            <i class="fa fa-fw fa-arrow-left opacity-50 me-1"></i> Retour site
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
