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

{% block container %}

    <div class="mx-auto max-w-[720px] py-10 lg:py-14">

        {% include '@Contao/fragment/onboarding/_stepper.html.twig' with { current: 1 } only %}

        {% include '@Contao/fragment/onboarding/_page_head.html.twig' with {
            kicker: 'onboarding.activate.kicker'|trans({}, 'cms'),
            title: 'onboarding.activate.title'|trans({}, 'cms'),
            lede: 'onboarding.activate.lede'|trans({}, 'cms'),
        } only %}

        <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">

                <form method="post" action="{{ actionUrl }}" x-data x-init="$el.submit()" class="flex flex-col items-center gap-4">
                    <input type="hidden" name="REQUEST_TOKEN" value="{{ contao_request_token() }}">
                    <p class="max-w-[42ch] text-[15px] leading-relaxed text-gray-600 dark:text-gray-300">{{ 'onboarding.activate.text'|trans({}, 'cms') }}</p>

                    <twig:Cms:Button variant="primary" size="xl" rounded="xl"
                            type="submit"
                            class="gap-2 px-5">
                        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 13 4 4L19 7"/></svg>
                        {{ 'onboarding.activate.submit'|trans({}, 'cms') }}
                    </twig:Cms:Button>
                </form>

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

{% endblock %}
