{% extends '@App/base.html.twig' %}

{% block title %}Définir mon mot de passe{% endblock %}

{% block body %}
    <main class="container min-vh-100 d-flex align-items-center justify-content-center py-5">
        <div class="card w-100 auth-card">
            <div class="card-body p-4 p-md-5">
                <div class="text-center mb-4">
                    <img src="{{ asset('vendor/matdash/images/logos/logo.svg') }}" alt="AppBase" height="42">
                    <h1 class="h4 mt-4 mb-1">Définir mon mot de passe</h1>
                    <p class="text-body-secondary mb-0">{{ user.email }}</p>
                </div>

                {% if error %}
                    <div class="alert alert-danger" role="alert">{{ error }}</div>
                {% endif %}

                <form method="post" action="{{ path('app_password_setup', {token: token}) }}" data-turbo="false">
                    <input type="hidden" name="_token" value="{{ csrf_token('password_setup_' ~ user.id) }}">

                    <div class="mb-3">
                        <label class="form-label" for="password_setup_password">Nouveau mot de passe</label>
                        <input type="password" name="password" id="password_setup_password" class="form-control" autocomplete="new-password" required autofocus>
                        <div class="mt-3 small" id="password-requirements">
                            <div data-rule="length" class="text-danger">Au moins 8 caractères</div>
                            <div data-rule="upper" class="text-danger">Au moins 1 lettre majuscule</div>
                            <div data-rule="lower" class="text-danger">Au moins 1 lettre minuscule</div>
                            <div data-rule="digit" class="text-danger">Au moins 1 chiffre</div>
                            <div data-rule="special" class="text-danger">Au moins 1 caractère spécial</div>
                        </div>
                    </div>

                    <div class="mb-4">
                        <label class="form-label" for="password_setup_confirmation">Confirmer le mot de passe</label>
                        <input type="password" name="password_confirmation" id="password_setup_confirmation" class="form-control" autocomplete="new-password" required>
                    </div>

                    <button class="btn btn-primary w-100" type="submit">Enregistrer mon mot de passe</button>
                </form>
            </div>
        </div>
    </main>

    <script>
        (() => {
            const input = document.getElementById('password_setup_password');
            const requirements = document.getElementById('password-requirements');
            if (!input || !requirements) {
                return;
            }

            const rules = {
                length: value => value.length >= 8,
                upper: value => /[A-Z]/.test(value),
                lower: value => /[a-z]/.test(value),
                digit: value => /\d/.test(value),
                special: value => /[^A-Za-z0-9]/.test(value),
            };

            const refresh = () => {
                Object.entries(rules).forEach(([rule, validator]) => {
                    const item = requirements.querySelector(`[data-rule="${rule}"]`);
                    const valid = validator(input.value);
                    item.classList.toggle('text-success', valid);
                    item.classList.toggle('text-danger', !valid);
                    item.textContent = `${valid ? '✓' : '•'} ${item.textContent.replace(/^[✓•]\s*/, '')}`;
                });
            };

            input.addEventListener('input', refresh);
            refresh();
        })();
    </script>
{% endblock %}