{# templates/security/reset_password_request.html.twig #}
{% extends 'base.html.twig' %}

{% block title %}Mot de passe oublié — CARTON LFM{% endblock %}

{% block body %}
<div style="min-height: calc(100vh - 120px); display: flex; align-items: center; justify-content: center; padding: 40px 16px;">

    <div style="width: 100%; max-width: 480px;">

        {# ── Icône / titre ──────────────────────────────────────── #}
        <div style="text-align: center; margin-bottom: 28px;">
            <div style="
                display: inline-flex; align-items: center; justify-content: center;
                width: 64px; height: 64px; border-radius: 50%;
                background-color: #e30613; margin-bottom: 14px;
            ">
                <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="white" viewBox="0 0 16 16">
                    <path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"/>
                </svg>
            </div>
            <h2 style="border: none; padding: 0; font-size: 22px; font-weight: bold; color: #ffffff; letter-spacing: 1px;">
                Mot de passe oublié
            </h2>
            <p style="color: rgba(255,255,255,0.6); font-size: 13px; margin-top: 6px;">
                Commission Régionale d'Éducation et de Discipline
            </p>
        </div>

        {# ── Carte formulaire ───────────────────────────────────── #}
        <div class="card">

            {# Flash messages #}
            {% for label, messages in app.flashes %}
                {% for message in messages %}
                    <div style="
                        padding: 12px 16px; border-radius: 8px; margin-bottom: 18px;
                        font-size: 14px; font-weight: bold;
                        {% if label == 'success' %}
                            background-color: #d4edda; color: #155724; border-left: 4px solid #28a745;
                        {% else %}
                            background-color: #f8d7da; color: #721c24; border-left: 4px solid #e30613;
                        {% endif %}
                    ">
                        {{ message }}
                    </div>
                {% endfor %}
            {% endfor %}

            <p style="color: #0a1f44; font-size: 14px; margin-bottom: 20px; line-height: 1.6;">
                Saisissez l'adresse e-mail associée à votre compte club.
                Un lien de réinitialisation valable <strong>60 minutes</strong> vous sera envoyé.
            </p>

            <form method="post" novalidate>
                <input type="hidden" name="_token" value="{{ csrf_token('reset_request') }}">

                <label for="email" style="color: #0a1f44;">Adresse e-mail du club</label>
                <input
                    type="email"
                    id="email"
                    name="email"
                    placeholder="club@exemple.fr"
                    required
                    autofocus
                    style="
                        width: 100%; padding: 12px 15px; margin: 8px 0 20px;
                        border: 2px solid #ccd3de; border-radius: 8px;
                        background-color: #f4f6f9; color: #0a1f44;
                        font-size: 14px; outline: none; transition: 0.3s;
                    "
                    onfocus="this.style.borderColor='#e30613'; this.style.boxShadow='0 0 8px rgba(227,6,19,0.3)'"
                    onblur="this.style.borderColor='#ccd3de'; this.style.boxShadow='none'"
                >

                <button type="submit" class="btn" style="width: 100%; font-size: 15px; padding: 13px;">
                    Envoyer le lien de réinitialisation
                </button>
            </form>

        </div>

        {# ── Retour connexion ───────────────────────────────────── #}
        <div style="text-align: center; margin-top: 20px;">
            <a href="{{ path('app_login') }}" style="color: rgba(255,255,255,0.7); font-size: 13px; text-decoration: none;">
                ← Retour à la connexion
            </a>
        </div>

        {# ── Footer ─────────────────────────────────────────────── #}
        <p style="text-align: center; color: rgba(255,255,255,0.3); font-size: 11px; margin-top: 30px;">
            Paiements sécurisés par Stripe · TLS 1.3
        </p>

    </div>
</div>
{% endblock %}