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

{% block title %}Mot de passe oublie - E-Ticket{% endblock %}
{% block description %}Reinitialisation de votre mot de passe E-Ticket{% endblock %}

{% block body %}
<div class="page-container-xs">
    <h1 class="text-3xl font-black uppercase tracking-tighter italic heading-page">Mot de passe oublie</h1>
    <p class="font-bold text-gray-600 italic mb-8">
        {% if step == 'email' %}
            Saisissez votre email pour recevoir un code.
        {% else %}
            Entrez le code recu par email et votre nouveau mot de passe.
        {% endif %}
    </p>

    {% for message in app.flashes('success') %}
        <div class="flash-success mb-8"><p class="font-black text-sm">{{ message }}</p></div>
    {% endfor %}

    {% for message in app.flashes('error') %}
        <div class="flash-error mb-8"><p class="font-black text-sm">{{ message }}</p></div>
    {% endfor %}

    {% if step == 'email' %}
        <form method="post" action="{{ path('app_forgot_password') }}" class="form-col">
            <input type="hidden" name="step" value="email">
            <div>
                <label for="forgot_email" class="text-xs font-black uppercase tracking-widest form-label">Email</label>
                <input type="email" id="forgot_email" name="email" required autofocus
                    value="{{ email }}" class="form-input focus:border-indigo-600" placeholder="jean.dupont@exemple.fr">
            </div>
            <div>
                <button type="submit" class="btn-brutal-full bg-yellow-400 font-black uppercase text-sm tracking-widest hover:bg-indigo-600 hover:text-white transition-all">
                    Envoyer le code
                </button>
            </div>
        </form>
    {% else %}
        <form method="post" action="{{ path('app_forgot_password') }}" class="form-col">
            <input type="hidden" name="step" value="code">
            <input type="hidden" name="email" value="{{ email }}">
            <div>
                <label for="forgot_code" class="text-xs font-black uppercase tracking-widest form-label">Code de verification</label>
                <input type="text" id="forgot_code" name="code" required autofocus
                    maxlength="6" pattern="[0-9]{6}" inputmode="numeric"
                    class="form-input focus:border-indigo-600 text-center text-2xl tracking-[0.3em]" placeholder="000000">
            </div>
            <div>
                <label for="forgot_password" class="text-xs font-black uppercase tracking-widest form-label">Nouveau mot de passe</label>
                <input type="password" id="forgot_password" name="password" required minlength="8"
                    class="form-input focus:border-indigo-600" placeholder="••••••••">
            </div>
            <div>
                <button type="submit" class="btn-brutal-full bg-yellow-400 font-black uppercase text-sm tracking-widest hover:bg-indigo-600 hover:text-white transition-all">
                    Reinitialiser le mot de passe
                </button>
            </div>
        </form>
    {% endif %}

    <div class="mt-8 text-center">
        <p class="text-sm font-bold text-gray-600"><a href="{{ path('app_login') }}" class="text-indigo-600 hover:underline font-black">Retour a la connexion</a></p>
    </div>
</div>
{% endblock %}
