{% extends 'auth/layout.html.twig' %}

{% block title %}RISKINESS - Réinitialisation{% endblock %}

{% block content %}
    <section class="auth" aria-label="Réinitialisation du mot de passe">
        <span class="auth__eyebrow">Sécurisé</span>
        <h1 class="auth__title"><span class="accent">Réinitialisation</span></h1>
        <p class="auth__lead">Choisis un nouveau mot de passe solide pour reprendre le contrôle de ton compte Riskiness.</p>

        {% for label, messages in app.flashes %}
            {% for message in messages %}
                <div class="flash flash--{{ label }}">{{ message }}</div>
            {% endfor %}
        {% endfor %}

        {% if errors is not empty %}
            <div class="flash flash--error">
                {% for error in errors %}
                    <div>{{ error }}</div>
                {% endfor %}
            </div>
        {% endif %}

        <form method="post" style="margin-top: 18px; display: grid; gap: 14px;">
            <input type="hidden" name="_csrf_token" value="{{ csrf_token('reset_password') }}">

            <label style="display: grid; gap: 8px;">
                <span style="color: var(--text-secondary); font-size: 0.88rem;">Nouveau mot de passe</span>
                <input type="password" name="password" minlength="8" autocomplete="new-password" required style="width: 100%; border-radius: 18px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); color: var(--text-primary); padding: 14px 16px; outline: none;">
            </label>

            <label style="display: grid; gap: 8px;">
                <span style="color: var(--text-secondary); font-size: 0.88rem;">Confirmation</span>
                <input type="password" name="password_confirmation" minlength="8" autocomplete="new-password" required style="width: 100%; border-radius: 18px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); color: var(--text-primary); padding: 14px 16px; outline: none;">
            </label>

            <button type="submit" style="border: 0; border-radius: 18px; padding: 14px 16px; color: #fff; background: var(--brand-gradient); font-weight: 700; box-shadow: 0 12px 28px rgba(245, 36, 94, 0.20); cursor: pointer;">
                Réinitialiser le mot de passe
            </button>
        </form>
    </section>
{% endblock %}