{% extends '_layouts/auth' %}

{% set pageTitle = 'Cambio Password' %}

{% block content %}
<a href="{{ href('/') }}">
    <img src="{{ href(themeCardealerLogo) }}" alt="{{ springApplicationName }}" class="auth-logo">
</a>

<h4 class="mb-1 text-center">Cambio Password</h4>
<p class="mb-4 text-center text-muted">Imposta una nuova password per il tuo account</p>

<form id="form-cambio-password" action="{{ href('/cambiopassword') }}" method="post">
    <input type="hidden" name="{{ request.getAttribute('_csrf').parameterName }}"
        value="{{ request.getAttribute('_csrf').token }}">

    <div class="mb-4">
        <label for="password" class="form-label">Nuova Password</label>
        <div class="input-group">
            <input type="password" id="password" name="password" class="form-control"
                placeholder="Nuova password" data-min-length="{{ passwordMinLength }}" autofocus required>
            <span class="input-group-text" id="toggle-password">
                <i class="fa fa-eye-slash"></i>
            </span>
        </div>
        <div class="invalid-feedback" id="password-feedback"></div>
    </div>

    <button type="submit" class="button">Cambia Password</button>
</form>
{% endblock %}

{% block scripts %}
<script>
    (function () {
        var toggle = document.getElementById('toggle-password');
        var pwd = document.getElementById('password');
        if (toggle && pwd) {
            toggle.addEventListener('click', function () {
                var icon = toggle.querySelector('i');
                if (pwd.type === 'password') {
                    pwd.type = 'text';
                    icon.className = 'fa fa-eye';
                } else {
                    pwd.type = 'password';
                    icon.className = 'fa fa-eye-slash';
                }
            });
        }
    })();

    document.getElementById('form-cambio-password').addEventListener('submit', function (e) {
        const pwd = document.getElementById('password');
        const fb = document.getElementById('password-feedback');
        const minLength = parseInt(pwd.dataset.minLength, 10) || 8;
        const err = window.validatePassword(pwd.value, minLength);
        if (err) {
            e.preventDefault();
            pwd.classList.add('is-invalid');
            fb.textContent = err;
            fb.classList.add('d-block');
        } else {
            pwd.classList.remove('is-invalid');
            fb.textContent = '';
            fb.classList.remove('d-block');
        }
    });
</script>
{% endblock %}