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

{% block title %}{{ 'lang.passwortReset'|trans|default('Reset your password') }}{% endblock %}

{% block navigation %}{% endblock %}

{% block body %}
    <div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-primary via-primary-dark to-primary p-4">
        <div class="w-full max-w-md">
            {# Flash сообщения #}
            {% include '_components/flash_messages.html.twig' %}

            {% for flash_error in app.flashes('reset_password_error') %}
                <div class="bg-red-50 border-l-4 border-red-500 p-4 rounded mb-6">
                    <p class="text-red-700 text-center">{{ flash_error }}</p>
                </div>
            {% endfor %}

            <div class="bg-white rounded-2xl shadow-2xl p-8 lg:p-12 border border-gray-100">
                {# Заголовок #}
                <div class="text-center mb-8">
                    <div class="inline-flex items-center justify-center w-16 h-16 bg-primary rounded-full mb-4">
                        <i class="fas fa-envelope text-2xl text-white"></i>
                    </div>
                    <h1 class="text-3xl font-bold text-primary mb-2">{{ 'lang.passwortReset'|trans|default('Reset your password') }}</h1>
                    <p class="text-gray-600">{{ 'lang.passwordResetEnterEmail'|trans|default('Enter your email address, and we will send you a link to reset your password.') }}</p>
                </div>

                {# Форма #}
                {{ form_start(requestForm, {'attr': {'class': 'space-y-6'}}) }}

                {# Поле email #}
                <div>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none">
                            <i class="icofont icofont-ui-email text-gray-400 text-sm"></i>
                        </div>
                        {{ form_widget(requestForm.email, {'attr': {
                            'class': 'w-full pl-11 pr-4 py-2.5 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary focus:border-secondary transition-all duration-200 text-gray-900 placeholder-gray-400 text-sm',
                            'placeholder': 'lang.email'|trans
                        }}) }}
                    </div>
                    {% if requestForm.email.vars.errors|length > 0 %}
                        <div class="mt-1 text-sm text-red-500 text-center">
                            {% for error in requestForm.email.vars.errors %}
                                <div>{{ error.message }}</div>
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>

                {# Кнопка отправки #}
                <button type="submit"
                        class="w-full py-2 px-4 bg-primary hover:bg-primary-light text-white text-sm font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2">
                    <i class="fas fa-paper-plane mr-2"></i>
                    {{ 'lang.passwordResetSendEmail'|trans }}
                </button>

                {# Ссылка на вход #}
                <div class="text-center pt-4 border-t border-gray-200">
                    <p class="text-sm text-gray-600 mb-2">{{ 'lang.rememberPassword'|trans }}</p>
                    <a href="{{ path('app_login') }}"
                       class="inline-block text-sm text-secondary hover:text-secondary-light font-semibold transition-colors">
                        <i class="fas fa-arrow-left mr-2"></i>
                        {{ 'lang.backToLogin'|trans|default('Back to login') }}
                    </a>
                </div>

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