@extends('layouts.app')

@section('titre', 'Connexion')

@section('contenu')
    <div class="mx-auto max-w-sm">

        <h1 class="mb-1 text-xl font-semibold">Connexion</h1>
        <p class="mb-6 text-sm text-slate-500">
            Gestion des collectes, des livraisons et des meubles à emporter.
        </p>

        @if ($errors->any())
            <div class="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">
                {{ $errors->first() }}
            </div>
        @endif

        <form method="POST" action="{{ route('connexion.envoi') }}" class="carte space-y-4">
            @csrf

            <div>
                <label for="email" class="etiquette">Adresse e-mail</label>
                <input id="email" name="email" type="email" inputmode="email" autocomplete="username"
                       value="{{ old('email') }}" required autofocus class="champ">
            </div>

            <div>
                <label for="mot_de_passe" class="etiquette">Mot de passe</label>
                <input id="mot_de_passe" name="mot_de_passe" type="password"
                       autocomplete="current-password" required class="champ">
            </div>

            <label class="flex items-center gap-2 text-sm text-slate-600">
                <input type="checkbox" name="se_souvenir" value="1"
                       class="size-4 rounded border-slate-300 text-marque-600 focus:ring-marque-600">
                Rester connecté sur cet appareil
            </label>

            <button type="submit" class="bouton-principal w-full">Se connecter</button>
        </form>

        {{-- Un donateur ou un futur bénévole qui arrive ici n'a pas de compte : on
             lui montre sa porte plutôt que de le laisser devant un mot de passe. --}}
        <div class="mt-6 text-sm text-slate-600">
            <p class="mb-2">Vous ne travaillez pas à la Ressourcerie ?</p>
            <ul class="space-y-1">
                <li><a href="{{ route('demande-collecte') }}" class="font-medium text-marque-700 hover:underline">Proposer un don</a></li>
                <li><a href="{{ route('benevoles.public') }}" class="font-medium text-marque-700 hover:underline">Devenir bénévole</a></li>
                <li><a href="{{ route('racine') }}" class="text-slate-500 hover:underline">Retour à l'accueil</a></li>
            </ul>
        </div>
    </div>
@endsection