{% extends 'revervation/base.twig' %}

{% block title %}Récupération de mot de passe | Ludik Event{% endblock %}

{% block body %}
    <div class="max-w-md mx-auto my-20 px-4">
        {# Affichage des erreurs (ex: Email inconnu, Code invalide) #}
        {% for label, messages in app.flashes %}
            {% for message in messages %}
                <div class="mb-4 p-4 rounded-2xl bg-red-50 border border-red-100 text-red-600 text-sm font-bold text-center animate-bounce">
                    {{ message }}
                </div>
            {% endfor %}
        {% endfor %}

        <div class="bg-white rounded-[2.5rem] p-10 shadow-2xl shadow-blue-100 border border-gray-50">

            {% if step == 'request' %}
                <div class="text-center mb-8">
                    <h1 class="text-3xl font-black text-gray-900">Oubli ?</h2>
                    <p class="text-gray-400 mt-2">Entrez votre mail pour recevoir un code.</p>
                </div>
                <form data-turbo="false" method="POST" class="space-y-4">
                    <input type="email" name="email_request" placeholder="votre@email.com" required aria-label="Adresse Email"
                           class="w-full bg-gray-50 border-none rounded-2xl px-6 py-4 focus:ring-2 focus:ring-blue-500 outline-none">
                    <button type="submit" class="w-full bg-blue-600 text-white font-bold py-4 rounded-2xl shadow-lg shadow-blue-200 hover:bg-blue-700 transition-all">
                        Envoyer le code
                    </button>
                </form>

            {% elseif step == 'verify' %}
                <div class="text-center mb-8">
                    <h1 class="text-3xl font-black text-gray-900">Vérification</h2>
                    <p class="text-gray-400 mt-2">Saisissez le code à 6 chiffres reçu par mail.</p>
                </div>
                <form data-turbo="false" method="POST" class="space-y-6">
                    <div class="flex justify-center">
                        <input type="text" name="code_verify" maxlength="6" placeholder="······" required autofocus aria-label="Code de vérification"
                               class="w-full text-center text-4xl font-black tracking-[0.3em] bg-gray-50 border-none rounded-2xl py-5 focus:ring-2 focus:ring-blue-500 outline-none">
                    </div>
                    <button type="submit" class="w-full bg-gray-900 text-white font-bold py-4 rounded-2xl shadow-lg hover:bg-black transition-all">
                        Valider le code
                    </button>
                    <p class="text-center">
                        <a href="{{ path('reservation_password', {step: 'request'}) }}" class="text-xs text-blue-500 hover:underline">Renvoyer un code</a>
                    </p>
                </form>

            {% elseif step == 'reset' %}
                <div class="text-center mb-8">
                    <h1 class="text-3xl font-black text-gray-900">Nouveau</h2>
                    <p class="text-gray-400 mt-2">Choisissez votre nouveau mot de passe.</p>
                </div>
                <form data-turbo="false" method="POST" class="space-y-4">
                    <input type="password" name="new_password" placeholder="Minimum 6 caractères" required autofocus aria-label="Nouveau mot de passe"
                           class="w-full bg-gray-50 border-none rounded-2xl px-6 py-4 focus:ring-2 focus:ring-blue-500 outline-none">
                    <button type="submit" class="w-full bg-green-600 text-white font-bold py-4 rounded-2xl shadow-lg shadow-green-200 hover:bg-green-700 transition-all">
                        Réinitialiser
                    </button>
                </form>
            {% endif %}

            <div class="mt-8 text-center border-t border-gray-50 pt-6">
                <a href="{{ path('reservation_login') }}" class="text-sm font-bold text-gray-400 hover:text-blue-600 transition-colors">
                    ← Retour à la connexion
                </a>
            </div>
        </div>
    </div>
{% endblock %}
