{% 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-primary-50 text-primary-600 dark:bg-primary-600/20 dark:text-primary-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"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>
                </div>

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

                <form method="post" action="{{ path('cms_login_link_check') }}" x-data x-init="$el.submit()" class="mt-2 flex flex-col items-center gap-4">
                    <input type="hidden" name="REQUEST_TOKEN" value="{{ contao_request_token() }}">
                    <input type="hidden" name="user" value="{{ user }}">
                    <input type="hidden" name="expires" value="{{ expires }}">
                    <input type="hidden" name="hash" value="{{ hash }}">

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

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

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

{% endblock %}
