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

{% block title %}Réinitialiser le mot de passe — Skeleton{% endblock %}
{% block navbar %}{% endblock %}
{% block footer %}{% endblock %}

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

{% block javascripts %}
{% if not invalid %}
<script src="{{ asset('js/reset-password.js') }}?v={{ "now"|date("U") }}"></script>
{% endif %}
{% endblock %}

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

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

        {% if invalid %}

            <h1>Lien invalide.</h1>
            <p class="login-subtitle">Ce lien de réinitialisation est invalide ou a expiré.</p>

            <div class="login-error" style="margin: 28px 0 24px;">
                Ce lien n'est plus valide. Les liens de réinitialisation expirent après <strong>1 heure</strong>.<br>
                Faites une nouvelle demande ci-dessous.
            </div>

            <a href="{{ path('app_forgot_password') }}" class="login-btn" style="display:block;text-align:center;text-decoration:none;margin-bottom:0;">
                Nouvelle demande
            </a>

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

        {% else %}

            <h1>Nouveau mot de passe.</h1>
            <p class="login-subtitle">Choisissez un nouveau mot de passe sécurisé pour votre compte.</p>

            {{ form_start(form, {attr: {id: 'reset-pwd-form', novalidate: 'novalidate'}}) }}

                {% if form.vars.errors|length %}
                    <div class="register-errors" style="margin-bottom:20px;">
                        <ul>{% for error in form.vars.errors %}<li>{{ error.message }}</li>{% endfor %}</ul>
                    </div>
                {% endif %}

                <div class="register-field">
                    {{ form_label(form.newPassword.first, 'Nouveau mot de passe <span class="required">*</span>', {label_html: true}) }}
                    <div class="register-input-wrap has-eye">
                        {{ form_widget(form.newPassword.first, {attr: {placeholder: 'Min. 12 caractères'}}) }}
                        <svg viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                        <button type="button" class="pwd-toggle" aria-label="Afficher le mot de passe">
                            <svg class="eye-on"  viewBox="0 0 24 24"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                            <svg class="eye-off" viewBox="0 0 24 24"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
                        </button>
                    </div>
                    <div class="register-strength">
                        <div class="register-strength-bar" id="rp-s1"></div>
                        <div class="register-strength-bar" id="rp-s2"></div>
                        <div class="register-strength-bar" id="rp-s3"></div>
                        <div class="register-strength-bar" id="rp-s4"></div>
                    </div>
                    <div class="register-strength-label" id="rp-label"></div>
                    <ul class="pwd-rules">
                        <li class="pwd-rule" data-rule="length">
                            <span class="pwd-rule-icon"></span>
                            Au moins 12 caractères
                        </li>
                        <li class="pwd-rule" data-rule="upper">
                            <span class="pwd-rule-icon"></span>
                            Une lettre majuscule
                        </li>
                        <li class="pwd-rule" data-rule="lower">
                            <span class="pwd-rule-icon"></span>
                            Une lettre minuscule
                        </li>
                        <li class="pwd-rule" data-rule="digit">
                            <span class="pwd-rule-icon"></span>
                            Un chiffre
                        </li>
                        <li class="pwd-rule" data-rule="special">
                            <span class="pwd-rule-icon"></span>
                            Un caractère spécial (- + ! * $ @ % _ ? .)
                        </li>
                    </ul>
                    <div class="pwd-refused">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/></svg>
                        Caractères refusés&nbsp;: <code>&lt; &gt; &amp; " ' ` \ /</code>
                    </div>
                </div>

                <div class="register-field">
                    {{ form_label(form.newPassword.second, 'Confirmer le mot de passe <span class="required">*</span>', {label_html: true}) }}
                    <div class="register-input-wrap has-eye">
                        {{ form_widget(form.newPassword.second, {attr: {placeholder: 'Répétez le mot de passe'}}) }}
                        <svg viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                        <button type="button" class="pwd-toggle" aria-label="Afficher le mot de passe">
                            <svg class="eye-on"  viewBox="0 0 24 24"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                            <svg class="eye-off" viewBox="0 0 24 24"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
                        </button>
                    </div>
                    <div data-error="newPassword">{{ form_errors(form.newPassword.first) }}</div>
                </div>

                <button type="submit" class="register-btn" id="reset-submit" style="margin-top:24px;">Réinitialiser le mot de passe</button>

            {{ form_end(form) }}

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

        {% endif %}

    </div>
{% endblock %}