{% extends "layout/auth_layout.twig" %}

{% block page_title_block %}{{ __('page_title.forgot_password') }}{% endblock %}

{% block content %}
<div class="min-h-screen flex items-center justify-center bg-gradient-to-r from-blue-900 to-indigo-700 py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-md w-full space-y-8 bg-white p-10 rounded-xl shadow-2xl">
        <div>
            <div class="text-center">
                <i class="fas fa-key text-5xl text-blue-700 mb-3"></i>
                <h2 class="text-3xl font-extrabold text-gray-900">
                    {{ __('page_title.forgot_password') }}
                </h2>
                <p class="mt-2 text-sm text-gray-600">
                    {{ __('auth.forgot_password_instruction') }}
                </p>
            </div>
        </div>
        
        {# As mensagens flash já são incluídas no topo pelo layout/auth_layout.twig #}

        <form class="mt-8 space-y-6" action="{{ BASE_URL }}{{ routeParser.urlFor('auth.forgot.send') }}" method="POST">
            <div>
                <label for="email" class="block text-sm font-medium text-gray-700 mb-1">{{ __('label.email') }}*</label>
                <input id="email" name="email" type="email" autocomplete="email" required
                       class="form-input {% if errors.email %}border-red-500{% endif %}"
                       placeholder="{{ __('placeholder.email_example') }}" value="{{ email | default('') }}">
                {% if errors.email %}<p class="text-red-500 text-xs mt-1">{{ errors.email }}</p>{% endif %}
            </div>

            <div>
                <button type="submit"
                        class="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                    {{ __('button.send_recovery_link') }}
                </button>
            </div>
        </form>
        <p class="mt-6 text-center text-sm text-gray-600">
            {{ __('auth.remembered_password') | default('Lembrou a senha?') }}
            <a href="{{ BASE_URL }}{{ routeParser.urlFor('auth.login.form') }}" class="font-medium text-indigo-600 hover:text-indigo-500">
                {{ __('link.back_to_login') }}
            </a>
        </p>
    </div>
</div>
<style>.form-input {display: block; width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #D1D5DB; border-radius: 0.375rem;} .form-input:focus { outline: 2px solid transparent;