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

{% block title %}{{ 'security.forgot_password_pending.title'|trans({}, 'meta') }}{% endblock %}

{% block meta %}
    <meta name="robots" content="noindex,nofollow">
    <meta name="description" lang="{{ app.request.locale }}" content="{{ 'security.forgot_password_pending.description'|trans({}, 'meta') }}">
{% endblock meta %}

{% block main %}
    <div class="min-h-[calc(100vh-13rem)] bg-[#f7f2ea]">
        <div class="relative mx-auto flex max-w-2xl items-center justify-center px-4 py-10 sm:px-6 lg:min-h-[calc(100vh-13rem)] lg:px-8 lg:py-16">
            <section class="w-full bg-white p-6 shadow-[0_18px_45px_rgba(61,43,23,0.08)] sm:p-8">
                <div class="bg-[#fcfaf7] p-6 sm:p-8">
                    <p class="text-xs uppercase tracking-[0.4em] text-[#9d7c47]">{{ 'security.forgot_password_pending.eyebrow'|trans }}</p>
                    <h1 class="mt-3 font-serif text-3xl text-[#201917]">{{ 'security.forgot_password_pending.heading'|trans }}</h1>
                    <div class="mt-5 space-y-4 text-sm leading-7 text-[#5d4b41]">
                        <p>{{ 'security.forgot_password_pending.message_prefix'|trans }}{% if reset_pending_email %} <strong>{{ reset_pending_email }}</strong>{% endif %}, {{ 'security.forgot_password_pending.message_suffix'|trans }}</p>
                        <p>{{ 'security.forgot_password_pending.expiry'|trans }}</p>
                        <p>{{ 'security.forgot_password_pending.spam_notice'|trans }}</p>
                    </div>
                    <div class="mt-8 flex flex-wrap gap-3">
                        <a href="{{ path('app_login') }}"
                           class="inline-flex min-h-12 items-center justify-center bg-[#201917] px-6 text-sm font-medium uppercase tracking-[0.24em] text-white transition hover:bg-[#9d7c47]">
                            {{ 'security.back_to_login'|trans }}
                        </a>
                    </div>
                </div>
            </section>
        </div>
    </div>
{% endblock %}
