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

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

{% block meta %}
    <meta name="robots" content="noindex,nofollow">
    <meta name="description" lang="{{ app.request.locale }}" content="{{ 'security.register_pending.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">
                    <span class="font-label text-[10px] font-semibold uppercase tracking-[0.2em] text-secondary">
                        {{ 'security.register_pending.eyebrow'|trans }}
                    </span>
                    <h1 class="mt-3 font-display text-[32px] leading-[1.04] font-semibold [font-optical-sizing:auto] text-primary md:text-[42px]">
                        {{ 'security.register_pending.heading'|trans }}
                    </h1>
                    <div class="mt-5 space-y-4 text-[15px] leading-7 text-primary/72">
                        <p>{{ 'security.register_pending.email_sent'|trans }}{% if activation_pending_email %} {{ 'security.register_pending.to'|trans }} <strong>{{ activation_pending_email }}</strong>{% endif %}.</p>
                        <p>{{ 'security.register_pending.instructions'|trans }}</p>
                        <p>{{ 'security.register_pending.spam_notice'|trans }}</p>
                    </div>
                    <div class="mt-8">
                        <a href="{{ path('app_login') }}"
                           class="inline-flex min-h-[46px] items-center justify-center bg-primary px-5 py-3 font-label text-[10px] font-semibold uppercase tracking-[0.18em] text-white transition hover:bg-secondary">
                            {{ 'security.back_to_login'|trans }}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}
