{% extends 'layouts/guest.html.twig' %}

{% block title %}Nouveau mot de passe{% endblock %}

{% block guest_content %}
<div>
    <div class="text-center mb-8">
        <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
            <svg class="w-8 h-8 text-gray-900" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
        </div>
        <h2 class="text-3xl font-extrabold text-gray-900">
            Nouveau mot de passe
        </h2>
        <p class="mt-2 text-sm text-gray-600">
            Choisissez un nouveau mot de passe sécurisé
        </p>
    </div>

    {{ form_start(resetForm, {
        'attr': {
            'class': 'space-y-6',
            'data-controller': 'password-strength form-submit',
            'data-form-submit-loading-text-value': 'Réinitialisation...'
        }
    }) }}

        <div>
            {{ form_label(resetForm.newPassword.first, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700 mb-2'}}) }}
            {{ form_widget(resetForm.newPassword.first, {'attr': {'class': 'appearance-none block w-full px-4 py-3 border-2 border-gray-900 rounded-lg shadow-md placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-900 bg-white'}}) }}
            {{ form_errors(resetForm.newPassword.first) }}

            {# Password strength indicator #}
            <div class="mt-3">
                <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
                    <div
                        data-password-strength-target="bar"
                        class="h-full transition-all duration-300 bg-gray-200"
                        style="width: 0%"></div>
                </div>
                <p data-password-strength-target="text" class="text-xs mt-1 text-gray-600"></p>
            </div>
        </div>

        <div>
            {{ form_label(resetForm.newPassword.second, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700 mb-2'}}) }}
            {{ form_widget(resetForm.newPassword.second, {'attr': {'class': 'appearance-none block w-full px-4 py-3 border-2 border-gray-900 rounded-lg shadow-md placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-900 bg-white'}}) }}
        </div>

        <div>
            <button
                type="submit"
                data-form-submit-target="submit"
                class="w-full flex justify-center items-center py-3 px-4 rounded-lg text-sm font-semibold text-white bg-black hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 border-2 border-black transition-colors">
                <span data-form-submit-target="buttonText">Réinitialiser le mot de passe</span>
                <span data-form-submit-target="spinner" class="hidden ml-2">
                    <svg class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                </span>
            </button>
        </div>

    {{ form_end(resetForm) }}
</div>
{% endblock %}