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

{% block title %}Connexion - Archive Bac Sénégal{% endblock %}

{% block body %}

    <main class="flex-grow border-t flex items-center justify-center px-6 py-12">
        <div class="w-full max-w-sm space-y-10">
            <div class="text-center">
                <img class="mx-auto h-10 w-auto" src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600" alt="Logo" />
                <h2 class="mt-6 text-2xl font-bold text-gray-900">Connectez-vous à votre compte</h2>
            </div>

            {# Affichage des erreurs #}
            {% if error %}
                <div class="rounded-md bg-red-50 p-4">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd" />
                            </svg>
                        </div>
                        <div class="ml-3">
                            <h3 class="text-sm font-medium text-red-800">Erreur d'authentification</h3>
                            <div class="mt-2 text-sm text-red-700">
                                <p>{{ error.messageKey|trans(error.messageData, 'security') }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            {% endif %}

            <form class="space-y-6" action="{{ path('app_login') }}" method="POST">
                <div>
                    <label for="email" class="block text-sm font-medium text-gray-700">Adresse email</label>
                    <input type="email" name="_username" id="email" required autocomplete="email" value="{{ last_username }}"
                           class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" />
                </div>

                <div>
                    <div class="flex justify-between items-center">
                        <label for="password" class="block text-sm font-medium text-gray-700">Mot de passe</label>
                        <a href="{{ path('app_forgot_password_request') }}" class="text-sm text-indigo-600 hover:text-indigo-500">Mot de passe oublié ?</a>
                    </div>
                    <div class="mt-1 relative">
                        <input type="password" name="_password" id="password" required
                               class="block w-full pr-10 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" />
                        <span onclick="togglePassword()" id="eye-icon"
                              class="absolute inset-y-0 right-3 flex items-center cursor-pointer text-xl">👁️</span>
                    </div>
                </div>
                <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">

                <div>
                    <button type="submit"
                            class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        Se connecter
                    </button>
                </div>
                <div>
                    <a href="{{ path('app_accueil_index') }}" class="text-sm text-indigo-600 hover:text-indigo-500">Accueil</a>
                </div>
            </form>

            {#            <p class="text-center text-sm text-gray-600">#}
            {#                Vous n'avez pas encore de compte ?#}
            {#                <a href="{{ path('app_register') }}" class="font-medium text-indigo-600 hover:text-indigo-500">Inscrivez-vous</a>#}
            {#            </p>#}
        </div>
    </main>

    <script>
        function togglePassword() {
            const input = document.getElementById("password");
            const icon = document.getElementById("eye-icon");
            if (input.type === "password") {
                input.type = "text";
                icon.innerText = "🙈";
            } else {
                input.type = "password";
                icon.innerText = "👁️";
            }
        }
    </script>
{% endblock %}
{% block footer %} {% endblock %}
{% block header %} {% endblock %}