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

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

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

{% block main %}
    <section class="relative min-h-screen overflow-hidden bg-background pt-32 pb-16 md:pt-36 md:pb-20">
        <div class="absolute inset-x-0 top-0 h-28 bg-primary md:h-32"></div>
        <div class="pointer-events-none absolute inset-x-0 top-0 h-[28rem] bg-[radial-gradient(circle_at_top,rgba(173,156,118,0.12),transparent_62%)]"></div>

        <div class="relative z-10 mx-auto max-w-[1440px] px-4 md:px-16">
            <div class="mx-auto max-w-2xl border border-primary/10 bg-surface-container-low p-5 shadow-[0_20px_60px_rgba(51,38,28,0.06)] md:p-7">
                <div class="border border-primary/8 bg-white/70 p-5 md:p-6">
                    <h1 class="font-display text-[32px] leading-[1.04] font-semibold [font-optical-sizing:auto] text-primary md:text-[42px]">
                        {{ 'security.forgot_password.heading'|trans }}
                    </h1>
                    <p class="mt-4 text-[15px] leading-7 text-primary/72">
                        {{ 'security.forgot_password.intro'|trans }}
                    </p>
                    {{ component('security:ForgotPasswordForm') }}
                </div>
            </div>
        </div>
    </section>
{% endblock %}
