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

{% block title %}Réinitialisation du 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="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/>
            </svg>
        </div>
        <h2 class="text-3xl font-extrabold text-gray-900">
            Mot de passe oublié ?
        </h2>
        <p class="mt-2 text-sm text-gray-600">
            Pas de problème, nous vous enverrons un lien de réinitialisation
        </p>
    </div>

    {{ form_start(requestForm, {
        'attr': {
            'class': 'space-y-6',
            'data-controller': 'form-submit',
            'data-form-submit-loading-text-value': 'Envoi en cours...'
        }
    }) }}

        <div>
            {{ form_label(requestForm.email, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700 mb-2'}}) }}
            {{ form_widget(requestForm.email, {'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(requestForm.email) }}
            {% if requestForm.email.vars.help %}
                <p class="mt-2 text-xs text-gray-500">{{ requestForm.email.vars.help }}</p>
            {% endif %}
        </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">Envoyer le lien de réinitialisation</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(requestForm) }}

    <div class="text-center border-t border-gray-200 pt-6 mt-6">
        <a href="{{ path('app_login') }}" class="text-sm text-gray-900 hover:text-gray-700 underline">
            Retour à la connexion
        </a>
    </div>
</div>
{% endblock %}