{% extends '_auth/base_auth.html.twig' %}

{% block title %}Nouveau mot de passe · Vulcan' Affûtage{% endblock %}
{% block metaDesc %}Définissez un nouveau mot de passe pour votre compte Vulcan' Affûtage.{% endblock %}

{% block auth_aside %}
    <span class="auth-aside-eyebrow">Récupération d'accès</span>
    <h2>Un nouveau <em>mot de passe</em>.</h2>
    <p>Choisissez un mot de passe solide : au moins 8 caractères et 3 types différents (minuscule, majuscule, chiffre, symbole).</p>
{% endblock %}

{% block auth_panel %}
    <span class="auth-eyebrow">Modification</span>
    <h1>Nouveau mot de passe</h1>
    <a href="{{ path('app_client_login') }}" class="auth-alt-link">Vous êtes là par erreur ? Connexion</a>

    {% if form_error is defined and form_error %}<div class="auth-banner" role="alert">{{ form_error }}</div>{% endif %}

    {# Mêmes lignes de message que l'inscription : erreurs dans la page, hauteur
       réservée, aucun décalage à l'affichage. La consigne du mot de passe vient
       de PasswordPolicy (src/Security) — une seule formulation pour tout le site. #}
    <form class="auth-form" action="{{ path('app_edit_password') }}" method="post" data-auth-form novalidate>
        <div>
            <div class="chk-field">
                <input id="password" name="password" type="password" placeholder=" " autocomplete="new-password" required
                       aria-describedby="password-msg"
                       class="{{ passwordError is defined ? 'invalid' : '' }}"{% if passwordError is defined %} aria-invalid="true"{% endif %}>
                <label for="password">Nouveau mot de passe</label>
            </div>
            <div class="auth-strength" aria-hidden="true"><span></span><span></span><span></span><span></span></div>
            <p id="password-msg" class="auth-field-msg{{ passwordError is defined ? ' is-error' : '' }}" data-auth-msg="password"
               data-auth-hint="{{ regleMdp }}" aria-live="polite"{% if passwordError is defined %} role="alert"{% endif %}>{{ passwordError|default(regleMdp) }}</p>
        </div>

        <div>
            <div class="chk-field">
                <input id="confirm_password" name="confirm_password" type="password" placeholder=" " autocomplete="new-password" required
                       aria-describedby="confirm_password-msg"
                       class="{{ confirmError is defined ? 'invalid' : '' }}"{% if confirmError is defined %} aria-invalid="true"{% endif %}>
                <label for="confirm_password">Confirmer le mot de passe</label>
            </div>
            <p id="confirm_password-msg" class="auth-field-msg{{ confirmError is defined ? ' is-error' : '' }}" data-auth-msg="confirm_password"
               aria-live="polite"{% if confirmError is defined %} role="alert"{% endif %}>{{ confirmError|default('') }}</p>
        </div>

        <input type="hidden" name="token" value="{{ token }}">
        <input type="hidden" name="email" value="{{ email }}">

        <button class="nhp-btn nhp-btn--primary" type="submit">
            Modifier le mot de passe
            <svg class="nhp-btn-arrow" width="16" height="16" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </button>
    </form>
{% endblock %}