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

{#{% block title %}Reset your password{% endblock %}#}

{#{% block body %}#}
{#    <h1>Reset your password</h1>#}

{#    {{ form_start(resetForm) }}#}
{#        {{ form_row(resetForm.plainPassword) }}#}
{#        <button class="btn btn-primary">Reset password</button>#}
{#    {{ form_end(resetForm) }}#}
{#{% endblock %}#}
{% extends 'base.html.twig' %}

{% block title %}Reset Password - Archive Bac Sénégal{% endblock %}

{% block body %}
    <main class="flex-grow border-t flex items-center justify-center px-6 py-12">
        <div class="w-full max-w-sm space-y-10">
            <div class="text-center">
                <img class="mx-auto h-10 w-auto" src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600" alt="Logo" />
                <h2 class="mt-6 text-2xl font-bold text-gray-900">Reset Your Password</h2>
            </div>

            {{ form_start(resetForm, {'attr': {'class': 'space-y-6'}}) }}
            <div>
                {{ form_label(resetForm.plainPassword.first, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
                <div class="mt-1 relative">
                    {{ form_widget(resetForm.plainPassword.first, {'attr': {
                        'class': 'block w-full pr-10 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm',
                        'autocomplete': 'new-password'
                    }}) }}
                    <span onclick="togglePassword('{{ resetForm.plainPassword.first.vars.id }}')"
                          class="absolute inset-y-0 right-3 flex items-center cursor-pointer text-xl">👁️</span>
                </div>
                {{ form_errors(resetForm.plainPassword.first) }}
            </div>

            <div>
                {{ form_label(resetForm.plainPassword.second, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
                <div class="mt-1 relative">
                    {{ form_widget(resetForm.plainPassword.second, {'attr': {
                        'class': 'block w-full pr-10 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm',
                        'autocomplete': 'new-password'
                    }}) }}
                    <span onclick="togglePassword('{{ resetForm.plainPassword.second.vars.id }}')"
                          class="absolute inset-y-0 right-3 flex items-center cursor-pointer text-xl">👁️</span>
                </div>
                {{ form_errors(resetForm.plainPassword.second) }}
            </div>

            <div class="text-sm text-gray-600">
                <p>Your password must contain at least 12 characters and not be compromised.</p>
            </div>

            <div>
                <button type="submit"
                        class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500">
                    Reset Password
                </button>
            </div>
            {{ form_end(resetForm) }}
        </div>
    </main>

    <script>
        function togglePassword(inputId) {
            const input = document.getElementById(inputId);
            const icon = input.nextElementSibling;
            if (input.type === "password") {
                input.type = "text";
                icon.innerText = "🙈";
            } else {
                input.type = "password";
                icon.innerText = "👁️";
            }
        }
    </script>
{% endblock %}

{% block footer %}{% endblock %}
{% block header %}{% endblock %}