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

{% block title %}Nouveau mot de passe - 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);">Nouveau mot de passe</h1>
        </div>

        {% if invalid %}
            <div style="background: #fef2f2; border-radius: 8px; padding: 1.25rem; text-align: center; color: #dc2626; font-size: 0.9rem; line-height: 1.6;">
                ❌ Ce lien est invalide ou a expiré (validité : 1 heure).<br><br>
                <a href="{{ path('app_forgot_password_request', {'_locale': app.request.locale}) }}"
                   style="color: #dc2626; font-weight: 700; text-decoration: underline;">Faire une nouvelle demande</a>
            </div>
        {% elseif success %}
            <div style="background: #e8f5e9; border-radius: 8px; padding: 1.25rem; text-align: center; color: #2e7d32; font-size: 0.9rem; line-height: 1.6;">
                ✅ Votre mot de passe a été mis à jour avec succès !
            </div>
            <div style="text-align: center; margin-top: 1.5rem;">
                <a href="{{ path('app_connexion', {'_locale': app.request.locale}) }}"
                   style="display: inline-block; padding: 0.65rem 1.5rem; background: var(--royal, #1a2e5a); color: #f5c400; border-radius: 8px; text-decoration: none; font-weight: 700;">
                    Se connecter
                </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;">
                Choisissez un nouveau mot de passe (8 caractères minimum).
            </p>

            <form method="post">
                <div style="margin-bottom: 1rem;">
                    <label style="display: block; font-size: 0.875rem; font-weight: 600; color: #374151; margin-bottom: 0.4rem;">
                        Nouveau mot de passe
                    </label>
                    <input type="password" name="password" required autofocus minlength="8"
                           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;"
                           onfocus="this.style.borderColor='#1a2e5a'" onblur="this.style.borderColor='#d1d5db'">
                </div>
                <div style="margin-bottom: 1.25rem;">
                    <label style="display: block; font-size: 0.875rem; font-weight: 600; color: #374151; margin-bottom: 0.4rem;">
                        Confirmer le mot de passe
                    </label>
                    <input type="password" name="confirm" required minlength="8"
                           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;"
                           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;">
                    Enregistrer le nouveau mot de passe
                </button>
            </form>
        {% endif %}

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