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

{% block title %}Changer votre mot de passe{% endblock %}
{% block footer %}{% endblock %}

{% block navbar %}
<nav class="navbar">
    <div class="nav-logo" style="cursor:default">
        <div class="nav-logo-icon{% if siteParams.logo %} has-img{% endif %}" data-site-logo>
            {% if siteParams.logo %}
                <img src="{{ asset(siteParams.logo) }}" alt="{{ siteParams.siteName ?? 'Logo' }}">
            {% else %}
                <svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
            {% endif %}
        </div>
        {% if siteParams.siteName %}<span class="nav-logo-name" data-site-name>{{ siteParams.siteName }}</span>{% endif %}
    </div>
    <div class="nav-actions">
        <div class="nav-dropdown-wrap">
            <button class="nav-avatar" id="nav-avatar-btn" aria-expanded="false" aria-haspopup="true">
                <span data-user-initials>{{ app.user.firstName|first|upper }}{{ app.user.lastName|first|upper }}</span>
            </button>
            <div class="nav-dropdown" id="nav-dropdown" role="menu">
                <div class="nav-dropdown-header">
                    <span class="nav-dropdown-name" data-user-fullname>{{ app.user.firstName }} {{ app.user.lastName }}</span>
                    <span class="nav-dropdown-email">{{ app.user.email }}</span>
                </div>
                <div class="nav-dropdown-divider"></div>
                <a href="{{ path('app_logout') }}" class="nav-dropdown-item nav-dropdown-item--logout" role="menuitem">
                    <svg viewBox="0 0 24 24"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
                    Déconnexion
                </a>
            </div>
        </div>
    </div>
</nav>
{% endblock %}

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

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

        {% include 'partials/_auth_logo.html.twig' with {class: 'register-logo'} %}

        <h1>Changement de mot de passe obligatoire</h1>
        <p class="register-subtitle">Votre compte nécessite un nouveau mot de passe avant de continuer.</p>

        {{ form_start(form, {'attr': {'novalidate': 'novalidate'}}) }}

            <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="fc-s1"></div>
                    <div class="register-strength-bar" id="fc-s2"></div>
                    <div class="register-strength-bar" id="fc-s3"></div>
                    <div class="register-strength-bar" id="fc-s4"></div>
                </div>
                <div class="register-strength-label" id="fc-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="force-pwd-submit" style="margin-top:24px;">Enregistrer le nouveau mot de passe</button>

        {{ form_end(form) }}

    </div>
{% endblock %}

{% block javascripts %}
<script>
    FormAjax.initEyeToggles();
    var pwdFirst = document.getElementById('change_password_step2_newPassword_first');
    var pwdSecond = document.getElementById('change_password_step2_newPassword_second');
    var btn = document.getElementById('force-pwd-submit');

    FormAjax.initPwdStrength(
        pwdFirst,
        ['fc-s1', 'fc-s2', 'fc-s3', 'fc-s4'].map(function (id) { return document.getElementById(id); }).filter(Boolean),
        document.getElementById('fc-label'),
        12
    );
    FormAjax.initPwdRules(pwdFirst, '.pwd-rule', 12);

    if (btn && pwdFirst && pwdSecond) {
        FormAjax.guardButton(btn, function () {
            return pwdFirst.value.trim().length > 0 && pwdSecond.value.trim().length > 0;
        }, [pwdFirst, pwdSecond]);
    }
</script>
{% endblock %}