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

{% block title %}Réinitialisez votre mot de passe {{ parent() }}{% endblock %}

{% block body %}
    {% for flashError in app.flashes('reset_password_error') %}
        <div class="alert alert-danger" role="alert">{{ flashError }}</div>
    {% endfor %}

    <div class="flex justify-center items-center mt-16">
        <form method="post" class="bg-white shadow-md rounded-2xl px-8 pt-6 pb-8 mb-4 w-full max-w-lg lg:max-w-sm">
            <h1 class="text-center text-5xl lg:text-3xl font-bold mb-6">Mot de passe oublié</h1>
    
            <div>
                <p class="text-2xl lg:text-base">
                    Veuillez saisir votre email de connexion afin de recevoir le lien de réinitialisation de votre mot de passe.
                </p>
            </div>
            
            {{ form_start(requestForm) }}
            <br>
            <div class="mb-4">
                <div class="flex">
                {{ form_label(requestForm.email, 'Email', {'label_attr': {'class': 'block text-2xl lg:text-sm font-bold text-gray-700'}}) }}<span class="mx-1 text-red-500 obligatoire">*</span>
            </div>
                {{ form_widget(requestForm.email, {'attr': {'class': 'mt-1 block w-full text-2xl lg:text-base p-3 lg:p-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500'}}) }}
                {{ form_errors(requestForm.email) }}
            </div>
            <style>
                .obligatoire { color: red; }
            </style>

            <button class="bg-vert hover:bg-teal-700 text-3xl lg:text-base text-white font-bold py-4 lg:py-2 px-4 rounded focus:outline-none focus:shadow-outline w-full" type="submit">
                Recevoir le lien
            </button>

            {{ form_end(requestForm) }}
        </form>
    </div>
{% endblock %}