{% extends '_layouts/empty' %}

{% block content %}
<div class="card">
    <div class="card-body">
        <div class="app-brand justify-content-center mb-6">
            <a href="/" class="app-brand-link">
                <span class="app-brand-logo demo">
                    <img src="{{ href(themeLogo) }}" width="110" height="32"
                        alt="{{ springApplicationName }}" class="navbar-brand-image">
                </span>
            </a>
        </div>
        <h4 class="mb-1 text-center">Cambio Password</h4>
        <p class="mb-6 text-center text-muted">Imposta una nuova password per il tuo account</p>
        <form id="form-cambio-password" action="/cambiopassword" method="post">
            <input type="hidden" name="{{ request.getAttribute('_csrf').parameterName }}"
                value="{{ request.getAttribute('_csrf').token }}">
            <div class="mb-6 form-password-toggle form-control-validation">
                <label class="form-label" for="password">Nuova Password</label>
                <div class="input-group input-group-merge">
                    <input type="password" id="password" class="form-control" name="password"
                        placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
                        aria-describedby="password" data-min-length="{{ passwordMinLength }}" autofocus />
                    <span class="input-group-text cursor-pointer">
                        <i class="icon-base ti tabler-eye-off"></i>
                    </span>
                </div>
                <div class="invalid-feedback" id="password-feedback"></div>
            </div>
            <div class="mb-6">
                <button class="btn btn-primary d-grid w-100" type="submit">Cambia Password</button>
            </div>
        </form>
        <script>
            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>
    </div>
</div>
{% endblock %}