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

{% block title %}Mot de passe oublie - SARL SITECONSEIL{% endblock %}
{% block description %}Reinitialisation de votre mot de passe CRM SITECONSEIL.{% endblock %}

{% block header %}
    <header class="sticky top-0 z-50 glass-heavy" style="border-radius: 0;">
        <div class="flex justify-center items-center h-16">
            <a href="{{ path('app_home') }}" aria-label="CRM SITECONSEIL - Accueil">
                <img class="h-10 md:h-12 w-auto" src="{{ 'logo_facture.png' | imagine_filter('logo') }}" alt="CRM SITECONSEIL" loading="eager">
            </a>
        </div>
    </header>
{% endblock %}

{% block body %}
<div class="flex items-center justify-center min-h-[calc(100vh-5rem)] px-4">
    <div class="w-full max-w-md">
        <div class="glass-heavy overflow-hidden">
            <div class="bg-yellow-400 border-b border-white/20 p-6 text-center">
                <h1 class="text-2xl font-bold">Mot de passe oublie</h1>
            </div>

            <div class="p-8">
                {% if error %}
                    <div class="mb-6 p-4 glass border border-red-300 text-red-800 font-medium text-sm rounded-xl">
                        {{ error }}
                    </div>
                {% endif %}

                {% if success %}
                    <div class="mb-6 p-4 border-2 border-green-300 text-green-800 font-bold text-sm">
                        {{ success }}
                    </div>
                {% endif %}

                {% if step == 'email' %}
                    <p class="text-sm text-gray-600 mb-6">Saisissez votre adresse email. Un code de verification a 6 chiffres vous sera envoye.</p>
                    <form method="post" class="flex flex-col gap-5">
                        <input type="hidden" name="action" value="send_code">
                        <div>
                            <label for="email" class="block text-xs font-bold uppercase tracking-wider mb-2">Email</label>
                            <input type="email" id="email" name="email" required
                                   class="w-full px-4 py-3 input-glass text-sm font-medium"
                                   placeholder="votre@email.fr">
                        </div>
                        <button type="submit"
                                class="w-full px-6 py-3 btn-gold text-sm font-bold uppercase tracking-wider text-gray-900">
                            Envoyer le code
                        </button>
                    </form>
                {% elseif step == 'code' %}
                    <p class="text-sm text-gray-600 mb-6">Saisissez le code a 6 chiffres recu par email ainsi que votre nouveau mot de passe.</p>
                    <form method="post" class="flex flex-col gap-5">
                        <input type="hidden" name="action" value="reset">
                        <div>
                            <label for="code" class="block text-xs font-bold uppercase tracking-wider mb-2">Code de verification</label>
                            <input type="text" id="code" name="code" required maxlength="6" pattern="[0-9]{6}"
                                   class="w-full px-4 py-3 input-glass text-sm font-medium text-center tracking-[0.5em]"
                                   placeholder="000000" autocomplete="one-time-code">
                        </div>
                        <div>
                            <label for="password" class="block text-xs font-bold uppercase tracking-wider mb-2">Nouveau mot de passe</label>
                            <input type="password" id="password" name="password" required minlength="8"
                                   class="w-full px-4 py-3 input-glass text-sm font-medium"
                                   placeholder="Minimum 8 caracteres">
                        </div>
                        <button type="submit"
                                class="w-full px-6 py-3 btn-gold text-sm font-bold uppercase tracking-wider text-gray-900">
                            Modifier mon mot de passe
                        </button>
                    </form>
                {% endif %}

                <a href="{{ path('app_home') }}" class="block text-center mt-4 text-xs font-bold text-gray-500 hover:text-indigo-600 transition-colors">Retour a la connexion</a>
            </div>
        </div>
    </div>
</div>
{% endblock %}