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

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

{% block meta %}
    {{ include('partials/seo.html.twig', {
        title_key: 'security.login.title',
        description_key: 'security.login.description',
        robots: 'noindex,nofollow'
    }) }}
{% 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-3xl text-center">
                <span class="font-label text-[11px] font-semibold uppercase tracking-[0.22em] text-secondary">
                    {{ 'security.login.submit'|trans }}
                </span>
                <h1 class="mt-4 font-display text-[34px] leading-[1.02] font-semibold [font-optical-sizing:auto] text-primary md:text-[48px]">
                    {{ 'security.login.title'|trans({}, 'meta') }}
                </h1>
            </div>

            <div class="mx-auto mt-10 grid max-w-6xl gap-6 lg:grid-cols-2">
                <section class="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">
                        <h2 class="font-display text-[28px] leading-tight font-semibold [font-optical-sizing:auto] text-primary">
                            {{ 'security.login.heading'|trans }}
                        </h2>
                        <p class="mt-3 text-[15px] leading-7 text-primary/72">
                            {{ 'security.login.description'|trans({}, 'meta') }}
                        </p>
                        {{ component('security:LoginForm', {
                            targetPath: app.request.get('_target_path')
                        }) }}
                    </div>
                </section>

                <section class="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">
                        <h2 class="font-display text-[28px] leading-tight font-semibold [font-optical-sizing:auto] text-primary">
                            {{ 'security.register.heading'|trans }}
                        </h2>
                        <p class="mt-3 text-[15px] leading-7 text-primary/72">
                            {{ 'security.register.description'|trans({}, 'meta') }}
                        </p>
                        {{ component('security:RegisterForm') }}
                    </div>
                </section>
            </div>
        </div>
    </section>
{% endblock %}
