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

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

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('css/login.css') }}">
{% endblock %}

{% block body %}
    <div class="login-card">

        {% include 'partials/_auth_logo.html.twig' %}

        {# ── Form state ── #}
        <div id="forgot-form-state"{% if sent %} hidden{% endif %}>
            <h1>Mot de passe oublié.</h1>
            <p class="login-subtitle">Saisissez votre adresse e-mail pour recevoir un lien de réinitialisation.</p>

            <form method="post" action="{{ path('app_forgot_password') }}">

                <div style="position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden" aria-hidden="true">
                    <input type="text" name="_website" tabindex="-1" autocomplete="off">
                </div>
                <input type="hidden" name="_form_time" value="{{ "now"|date("U") }}">

                <div class="login-field">
                    <label for="email">Adresse e-mail <span class="required">*</span></label>
                    <div class="login-input-wrap">
                        <input type="email" name="email" id="email"
                               autocomplete="email" required autofocus placeholder="vous@exemple.com">
                        <svg viewBox="0 0 24 24"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M2 7l10 7 10-7"/></svg>
                    </div>
                </div>

                <button type="submit" class="login-btn" id="forgot-submit">Envoyer le lien</button>

            </form>

            <p class="login-footer-link"><a href="{{ path('app_login') }}">← Retour à la connexion</a></p>
        </div>

        {# ── Sent state ── #}
        <div id="forgot-sent-state"{% if not sent %} hidden{% endif %}>
            <h1>E-mail envoyé.</h1>
            <p class="login-subtitle">Si un compte est associé à cette adresse, vous recevrez un lien de réinitialisation dans quelques instants.</p>

            <div style="margin: 28px 0 24px; padding: 16px 18px; background: rgba(94,207,174,0.08); border: 1.5px solid rgba(94,207,174,0.25); border-radius: 12px; font-size: 0.84rem; color: #2e9e7a; display: flex; align-items: flex-start; gap: 10px;">
                <svg viewBox="0 0 24 24" style="width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;margin-top:1px"><path d="M20 6L9 17l-5-5"/></svg>
                <span>Vérifiez votre boîte mail et cliquez sur le lien reçu. Le lien est valable <strong>{{ siteParams.resetPasswordTokenTtl|duration_fr }}</strong>.</span>
            </div>

            <a href="{{ path('app_login') }}" class="login-btn" style="display:block;text-align:center;text-decoration:none;margin-bottom:0;">
                Retour à la connexion
            </a>
        </div>

    </div>
{% endblock %}

{% block javascripts %}
<script src="{{ asset('js/forgot-password.js') }}"></script>
{% endblock %}