e-cosplay/templates/security/forgot_password.twig

{% extends 'base.twig' %}

{% block title %}{{ 'events.forgot_password'|trans }}{% endblock %}
{% block meta_description %}{{ 'events.forgot_password'|trans }}{% endblock %}

{% block canonical_url %}<link rel="canonical" href="{{ url('app_forgot_password') }}" />{% endblock %}

{% block breadcrumb_schema %}
    <script type="application/ld+json">
        {
          "@context": "https://schema.org",
          "@type": "BreadcrumbList",
          "itemListElement": [
            {
              "@type": "ListItem",
              "position": 1,
              "name": "{{ 'breadcrumb.home'|trans }}",
              "item": "{{ app.request.schemeAndHttpHost }}"
            },
            {
              "@type": "ListItem",
              "position": 2,
              "name": "{{ 'breadcrumb.forgot_password'|trans }}",
              "item": "{{ app.request.schemeAndHttpHost }}{{ app.request.pathInfo }}"
            }
          ]
        }
    </script>
{% endblock %}

{% block body %}
    <div class="min-h-screen flex items-center justify-center bg-[#fbfbfb] py-12 px-4 sm:px-6 lg:px-8 italic">
        <div class="max-w-md w-full">

            {# CONTENEUR NEUBRUTALISTE #}
            <div class="bg-white border-8 border-gray-900 p-8 md:p-10 shadow-[12px_12px_0px_#4f46e5] relative">

                {# BADGE DE STATUT #}
                <div class="absolute -top-4 -left-4 bg-pink-500 text-white border-4 border-gray-900 px-4 py-1 font-black text-xs uppercase tracking-widest rotate-[-5deg]">
                    System_Recovery
                </div>

                <div class="mb-8 mt-4">
                    <h2 class="text-4xl font-black text-gray-900 uppercase tracking-tighter leading-none">
                        {{ 'events.forgot_password'|trans }}<span class="text-pink-500">?</span>
                    </h2>
                    <p class="mt-4 text-xs font-bold text-gray-500 uppercase leading-snug tracking-widest">
                        {{ 'text.enter_email_for_reset'|trans }} _
                    </p>
                </div>

                {# ALERTES FLASH #}
                {% for flash_error in app.flashes('reset_password_error') %}
                    <div class="p-4 mb-6 border-4 border-gray-900 bg-pink-100 text-pink-700 font-black uppercase text-xs shadow-[4px_4px_0px_rgba(0,0,0,1)]">
                        <i class="fas fa-terminal mr-2"></i> {{ flash_error }}
                    </div>
                {% endfor %}

                {% for message in app.flashes('success') %}
                    <div class="p-4 mb-6 border-4 border-gray-900 bg-green-100 text-green-700 font-black uppercase text-xs shadow-[4px_4px_0px_rgba(0,0,0,1)]">
                        <i class="fas fa-check-double mr-2"></i> {{ message }}
                    </div>
                {% endfor %}

                {# FORMULAIRE SYMFONY #}
                {{ form_start(form, {'attr': {'class': 'space-y-8'}}) }}

                <div class="space-y-2">
                    <label class="block text-xs font-black uppercase tracking-widest text-gray-900">
                        {{ 'label.email'|trans }} //
                    </label>

                    {{ form_widget(form.email, {
                        'attr': {
                            'class': 'w-full px-4 py-4 border-4 border-gray-900 text-gray-900 font-black placeholder-gray-400 focus:ring-0 focus:border-pink-500 shadow-[4px_4px_0px_rgba(0,0,0,1)] transition-all',
                            'placeholder': 'votre@email.com',
                            'autocomplete': 'email',
                            'required': 'required'
                        }
                    }) }}

                    <div class="text-pink-600 font-black text-[10px] uppercase mt-2">
                        {{ form_errors(form.email) }}
                    </div>
                </div>

                <div>
                    <button type="submit"
                            class="w-full group flex items-center justify-center py-4 px-4 border-4 border-gray-900 text-lg font-black uppercase tracking-tighter text-white bg-gray-900 shadow-[8px_8px_0px_#ec4899] hover:shadow-none hover:translate-x-1 hover:translate-y-1 transition-all">
                        {{ 'button.send_reset_link'|trans }}
                        <i class="fas fa-paper-plane ml-3 text-pink-400 group-hover:translate-x-1 transition-transform"></i>
                    </button>
                </div>

                {{ form_end(form) }}

                {# NAVIGATION #}
                <div class="mt-10 pt-6 border-t-4 border-gray-100 flex justify-center">
                    <a href="{{ path('app_login') }}" class="inline-flex items-center text-[11px] font-black uppercase tracking-widest text-gray-400 hover:text-indigo-600 transition-colors">
                        <i class="fas fa-arrow-left mr-2"></i>
                        {{ 'link.back_to_login'|trans }}
                    </a>
                </div>

            </div>

            {# DECORATION BACKGROUND (OPTIONNEL) #}
            <div class="mt-8 flex justify-center gap-4 opacity-20">
                <div class="w-12 h-2 bg-gray-900"></div>
                <div class="w-12 h-2 bg-indigo-600"></div>
                <div class="w-12 h-2 bg-pink-500"></div>
            </div>
        </div>
    </div>
{% endblock %}