{% extends 'base.html.twig' %}

{% block title %}Se connecter !{% endblock %}

{% block body %}
<div class="flex items-center justify-center min-h-screen bg-gray-50 py-16">
    <div class="bg-white rounded-lg shadow-lg p-10 w-full max-w-md">
        {% if error %}
            <div class="bg-red-100 text-red-700 p-3 rounded mb-4">
                {{ error.messageKey|trans(error.messageData, 'security') }}
            </div>
        {% endif %}

        {% if app.user %}
            <div class="mb-4 text-sm text-gray-600">
                Vous êtes connecté en tant que <strong>{{ app.user.userIdentifier }}</strong>, 
                <a href="{{ path('app_logout') }}" class="text-[#045B79] hover:underline">Se déconnecter</a>
            </div>
        {% endif %}

        <h1 class="text-3xl font-extrabold text-center text-[#045B79] mb-8">Bon retour</h1>
        <p class="text-center text-sm text-gray-600 mb-6">
            Veuillez entrer votre email et mot de passe pour continuer.
        </p>

        <form method="post" class="space-y-6">
            <!-- Email -->
            <div>
                <label for="inputEmail" class="block text-sm font-medium text-gray-700">Email</label>
                <input type="email" value="{{ last_username }}" name="email" id="inputEmail" 
                       class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-[#045B79] focus:border-[#045B79]"
                       autocomplete="email" required autofocus>
            </div>

            <!-- Mot de passe -->
            <div>
                <label for="inputPassword" class="block text-sm font-medium text-gray-700">Mot de passe</label>
                <input type="password" name="password" id="inputPassword"
                       class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-[#045B79] focus:border-[#045B79]"
                       autocomplete="current-password" required>
            </div>

            <!-- Jeton CSRF -->
            <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">

            <!-- Se souvenir de moi -->
            <div class="flex items-center">
                <input type="checkbox" name="_remember_me" id="remember_me" 
                       class="h-4 w-4 text-[#045B79] border-gray-300 rounded focus:ring-[#045B79]">
                <label for="remember_me" class="ml-2 block text-sm text-gray-700">
                    Se souvenir de moi
                </label>
            </div>

            <!-- Bouton de soumission -->
            <button type="submit" 
                    class="w-full bg-[#045B79] text-white py-3 px-6 rounded-lg shadow-lg hover:bg-[#033d57] focus:ring-2 focus:ring-[#045B79] focus:ring-opacity-50 text-lg font-medium">
                Se connecter
            </button>
        </form>
    </div>
</div>
{% endblock %}