{% extends 'reset_password/_layout.html.twig' %}

{% block title %}Nouveau mot de passe — VIIZIA{% endblock %}

{% block auth_content %}
    <div class="viz-auth-icon"><i class="ti ti-lock-open"></i></div>
    <h1 class="viz-auth-h1">Nouveau mot de passe</h1>
    <p class="viz-auth-sub">Compte : {{ userEmail }}</p>

    {{ form_start(resetForm, { attr: { novalidate: 'novalidate' } }) }}
        {{ form_errors(resetForm, { attr: { class: 'viz-auth-form-errors' } }) }}

        <label class="viz-auth-label" for="{{ resetForm.plainPassword.first.vars.id }}">Nouveau mot de passe</label>
        <div class="viz-auth-field">
            <i class="ti ti-lock"></i>
            {{ form_widget(resetForm.plainPassword.first, { attr: { class: '' } }) }}
            <span class="viz-auth-pwd-toggle"
                  onclick="vizTogglePwd('{{ resetForm.plainPassword.first.vars.id }}', this)"
                  role="button" tabindex="-1" aria-label="Afficher / masquer">
                <i class="ti ti-eye"></i>
            </span>
        </div>
        {{ form_errors(resetForm.plainPassword.first, { attr: { class: 'viz-auth-form-errors' } }) }}

        <label class="viz-auth-label" for="{{ resetForm.plainPassword.second.vars.id }}" style="margin-top: 0.75rem;">Confirmer le mot de passe</label>
        <div class="viz-auth-field">
            <i class="ti ti-lock"></i>
            {{ form_widget(resetForm.plainPassword.second, { attr: { class: '' } }) }}
            <span class="viz-auth-pwd-toggle"
                  onclick="vizTogglePwd('{{ resetForm.plainPassword.second.vars.id }}', this)"
                  role="button" tabindex="-1" aria-label="Afficher / masquer">
                <i class="ti ti-eye"></i>
            </span>
        </div>
        {{ form_errors(resetForm.plainPassword.second, { attr: { class: 'viz-auth-form-errors' } }) }}
        <p class="viz-auth-help">Minimum 8 caractères.</p>

        <button type="submit" class="viz-auth-submit">
            <i class="ti ti-device-floppy"></i>
            <span>Enregistrer le nouveau mot de passe</span>
        </button>
    {{ form_end(resetForm) }}

    <script>
        function vizTogglePwd(inputId, el) {
            var inp = document.getElementById(inputId);
            if (!inp) return;
            var show = inp.type === 'password';
            inp.type = show ? 'text' : 'password';
            el.querySelector('i').className = show ? 'ti ti-eye-off' : 'ti ti-eye';
        }
    </script>
{% endblock %}