{% 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 meta %}

{% block main %}
    <div class="min-h-page bg-page">
        <div class="relative mx-auto flex max-w-2xl items-center justify-center px-4 py-10 sm:px-6 lg:min-h-page lg:px-8 lg:py-16">
            <section class="w-full bg-surface p-5 shadow-panel sm:p-7 lg:p-8">
                <div class="bg-surface-muted p-5 sm:p-6">
                    <p class="text-xs uppercase tracking-eyebrow text-accent">{{ 'security.login.forgot_password'|trans }}</p>
                    <h1 class="mt-3 font-serif text-3xl text-foreground">{{ 'security.forgot_password.heading'|trans }}</h1>
                    <p class="mt-4 text-sm leading-7 text-foreground-muted">{{ 'security.forgot_password.intro'|trans }}</p>
                    {{ component('security:ForgotPasswordForm') }}
                </div>
            </section>
        </div>
    </div>
{% endblock %}
