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

{% block title %}Mot de passe oublié - Na+{% endblock %}

{% block body %}
<main style="min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem; background: #f8f9fa;">
    <div style="background: white; border-radius: 12px; padding: 2.5rem; width: 100%; max-width: 440px; box-shadow: 0 4px 24px rgba(0,0,0,0.1);">

        <div style="text-align: center; margin-bottom: 2rem;">
            <a href="/">
                <img src="/Logo.png" alt="Na+" style="height: 48px;">
            </a>
            <h1 style="margin: 1rem 0 0.25rem; font-size: 1.4rem; color: var(--royal, #1a2e5a);">Mot de passe oublié</h1>
        </div>

        {% if sent %}
            <div style="background: #e8f5e9; border-radius: 8px; padding: 1.25rem; text-align: center; color: #2e7d32; font-size: 0.9rem; line-height: 1.6;">
                ✅ Si cette adresse email est associée à un compte Na+, vous recevrez un lien de réinitialisation dans quelques minutes.<br><br>
                <small style="color: #6b7280;">Pensez à vérifier vos spams.</small>
            </div>
            <div style="text-align: center; margin-top: 1.5rem;">
                <a href="{{ path('app_connexion', {'_locale': app.request.locale}) }}"
                   style="color: var(--royal, #1a2e5a); font-size: 0.875rem; text-decoration: underline;">← Retour à la connexion</a>
            </div>
        {% else %}
            {% if error %}
                <div style="background: #fef2f2; border-radius: 8px; padding: 1rem; color: #dc2626; font-size: 0.875rem; margin-bottom: 1rem;">
                    {{ error }}
                </div>
            {% endif %}

            <p style="color: #6b7280; font-size: 0.875rem; margin-bottom: 1.5rem; line-height: 1.6;">
                Saisissez votre adresse email. Vous recevrez un lien pour créer un nouveau mot de passe.
            </p>

            <form method="post">
                <div style="margin-bottom: 1.25rem;">
                    <label style="display: block; font-size: 0.875rem; font-weight: 600; color: #374151; margin-bottom: 0.4rem;">
                        Adresse email
                    </label>
                    <input type="email" name="email" required autofocus
                           style="width: 100%; box-sizing: border-box; padding: 0.65rem 0.875rem; border: 1px solid #d1d5db; border-radius: 8px; font-size: 0.95rem; outline: none; transition: border-color 0.15s;"
                           onfocus="this.style.borderColor='#1a2e5a'" onblur="this.style.borderColor='#d1d5db'">
                </div>

                <button type="submit"
                        style="width: 100%; padding: 0.75rem; background: var(--royal, #1a2e5a); color: #f5c400; border: none; border-radius: 8px; font-size: 1rem; font-weight: 700; cursor: pointer;">
                    Envoyer le lien
                </button>
            </form>

            <div style="text-align: center; margin-top: 1.5rem;">
                <a href="{{ path('app_connexion', {'_locale': app.request.locale}) }}"
                   style="color: var(--royal, #1a2e5a); font-size: 0.875rem; text-decoration: underline;">← Retour à la connexion</a>
            </div>
        {% endif %}

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