{% extends '@Contao/fragment/_container.html.twig' %}

{% block container %}

    <div class="mx-auto max-w-[480px] py-16 lg:py-24">
        <div class="overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800">
            <div class="px-6 py-10 text-center">

                <div class="mx-auto mb-5 grid h-12 w-12 place-items-center rounded-xl bg-amber-50 text-amber-600 dark:bg-amber-500/20 dark:text-amber-300">
                    <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
                </div>

                <h1 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">{{ 'signIn.magicLink.invalid.title'|trans({}, 'cms') }}</h1>

                <p class="mx-auto mb-6 max-w-[40ch] text-[15px] leading-relaxed text-gray-600 dark:text-gray-300">{{ 'signIn.magicLink.invalid.text'|trans({}, 'cms') }}</p>

                {# `px-5` overrides the xl default `px-4` via tailwind_merge. #}
                <twig:Cms:Button variant="primary" size="xl" rounded="xl" href="/" class="px-5">
                    {{ 'signIn.magicLink.invalid.home'|trans({}, 'cms') }}
                </twig:Cms:Button>

            </div>
        </div>
    </div>

{% endblock %}
