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

{% block container %}
    {{ block('content') }}
{% endblock %}

{% block content %}

    {% set email = app.session.get('registration.email') %}

    <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.head.verify.kicker'|trans({}, 'cms'),
            title: 'onboarding.head.verify.title'|trans({}, 'cms'),
            lede: 'onboarding.head.verify.lede'|trans({}, 'cms'),
        } only %}

        {% if app.session.get('registration.passkey') %}
            {# Passkey creation ceremony for the just-created (still disabled) account.
               The user entity is resolved from the session by PendingRegistrationUserEntityGuesser. #}
            <div x-data="{ pk: 'idle' }"
                 @webauthn:attestation:success="pk = 'done'"
                 @webauthn:attestation:failure="pk = 'error'"
                 data-controller="web-auth--webauthn-stimulus"
                 data-web-auth--webauthn-stimulus-creation-options-url-value="/register/passkey/options"
                 data-web-auth--webauthn-stimulus-creation-result-url-value="/register/passkey/result"
                 class="mb-6 overflow-hidden rounded-2xl border border-primary-200 bg-primary-50 shadow-sm dark:border-primary-800 dark:bg-primary-900/20">
                <div class="flex items-start gap-4 px-6 py-5">
                    <div class="grid h-10 w-10 flex-none place-items-center rounded-xl bg-gray-900 text-white dark:bg-gray-700">
                        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="12" r="4"/><path d="M12 12h10"/><path d="M18 12v3"/><path d="M22 12v2"/></svg>
                    </div>
                    <div class="min-w-0 flex-1">
                        <h2 class="text-base font-bold text-gray-900 dark:text-white">{{ 'onboarding.verify.passkey.cardTitle'|trans({}, 'cms') }}</h2>

                        <div x-show="pk === 'idle' || pk === 'error'">
                            <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">{{ 'onboarding.verify.passkey.text'|trans({}, 'cms') }}</p>
                            <button type="button"
                                    data-action="web-auth--webauthn-stimulus#signup"
                                    @click="if (pk !== 'creating') pk = 'creating'"
                                    class="mt-3 inline-flex items-center gap-2 rounded-md bg-gray-900 px-4 py-2 text-sm font-semibold text-white hover:bg-gray-800 focus:outline-none dark:bg-gray-700 dark:hover:bg-gray-600">
                                <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="12" r="4"/><path d="M12 12h10"/><path d="M18 12v3"/><path d="M22 12v2"/></svg>
                                {{ 'onboarding.verify.passkey.button'|trans({}, 'cms') }}
                            </button>
                            <p x-show="pk === 'error'" x-cloak class="mt-2 text-sm font-medium text-red-700 dark:text-red-400">{{ 'onboarding.verify.passkey.error'|trans({}, 'cms') }}</p>
                        </div>

                        <p x-show="pk === 'creating'" x-cloak class="mt-1 text-sm text-gray-600 dark:text-gray-300">{{ 'onboarding.verify.passkey.creating'|trans({}, 'cms') }}</p>

                        <p x-show="pk === 'done'" x-cloak class="mt-1 flex items-center gap-2 text-sm font-semibold text-emerald-700 dark:text-emerald-400">
                            <svg class="h-4 w-4 flex-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m5 13 4 4L19 7"/></svg>
                            {{ 'onboarding.verify.passkey.done'|trans({}, 'cms') }}
                        </p>
                    </div>
                </div>
            </div>
        {% endif %}

        <div class="overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800">

            <div class="flex items-center gap-3 border-b border-gray-200 bg-gray-50 px-6 py-5 dark:border-gray-700 dark:bg-gray-800/60">
                <div class="grid h-8 w-8 flex-none place-items-center rounded-lg bg-primary-600 text-sm font-bold text-white">1</div>
                <div>
                    <h2 class="text-xl font-bold leading-tight text-gray-900 dark:text-white">{{ 'onboarding.verify.cardTitle'|trans({}, 'cms') }}</h2>
                    <div class="mt-0.5 text-sm font-medium text-gray-500 dark:text-gray-400">{{ 'onboarding.verify.cardSub'|trans({}, 'cms') }}</div>
                </div>
            </div>

            <div class="space-y-5 px-6 py-6">

                {# Envelope illustration #}
                <div class="relative grid aspect-[16/9] place-items-center overflow-hidden rounded-2xl border border-primary-100 bg-gradient-to-b from-primary-50 to-primary-100/60 dark:border-gray-700 dark:from-gray-700/40 dark:to-gray-700/20" aria-hidden="true">
                    <div class="relative w-[64%] -rotate-3 rounded-xl border border-primary-100 bg-white p-3.5 shadow-xl dark:border-gray-600 dark:bg-gray-900">
                        <div class="flex items-center gap-2 text-[11px] font-semibold text-gray-600 dark:text-gray-300">
                            <span class="grid h-[18px] w-[18px] place-items-center rounded-md bg-primary-600 text-[10px] font-bold text-white">F</span>
                            {{ 'onboarding.verify.mailSender'|trans({}, 'cms') }}
                        </div>
                        <div class="mt-2 text-[13px] font-semibold text-gray-900 dark:text-white">{{ 'onboarding.verify.mailSubject'|trans({}, 'cms') }}</div>
                        <div class="mt-2 h-1.5 rounded bg-gray-200 dark:bg-gray-700"></div>
                        <div class="mt-1.5 h-1.5 w-[90%] rounded bg-gray-200 dark:bg-gray-700"></div>
                        <div class="mt-1.5 h-1.5 w-[70%] rounded bg-gray-200 dark:bg-gray-700"></div>
                        <span class="mt-2.5 inline-block rounded-md bg-primary-600 px-2.5 py-1.5 text-[10px] font-semibold text-white">{{ 'onboarding.verify.mailCta'|trans({}, 'cms') }}</span>
                    </div>
                    <span class="absolute right-3.5 top-3.5 rotate-6 rounded border border-dashed border-white/40 bg-emerald-600 px-2 py-1 text-[10px] font-bold uppercase tracking-widest text-white">{{ 'onboarding.verify.stamp'|trans({}, 'cms') }}</span>
                </div>

                {# Sent-to summary #}
                {% if email %}
                    <div class="flex items-center gap-3 rounded-xl border border-gray-200 bg-gray-50 px-4 py-3.5 dark:border-gray-700 dark:bg-gray-800/60">
                        <div class="grid h-9 w-9 flex-none place-items-center rounded-lg border border-gray-200 bg-white text-primary-600 dark:border-gray-600 dark:bg-gray-900">
                            <svg class="h-[18px] w-[18px]" 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>
                        <div class="min-w-0 flex-1">
                            <div class="text-[11px] font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">{{ 'onboarding.verify.sentTo'|trans({}, 'cms') }}</div>
                            <div class="truncate text-sm font-semibold text-gray-900 dark:text-white">{{ email }}</div>
                        </div>
                    </div>
                {% endif %}

                {# Webmail quick links #}
                <div>
                    <div class="mb-2 text-[13px] font-semibold text-gray-700 dark:text-gray-200">{{ 'onboarding.verify.openInbox'|trans({}, 'cms') }}</div>
                    <div class="grid grid-cols-1 gap-2 sm:grid-cols-3">
                        {% for provider in [
                            { name: 'Gmail', url: 'https://mail.google.com', initial: 'G', color: 'bg-[#ea4335]' },
                            { name: 'Outlook', url: 'https://outlook.live.com', initial: 'O', color: 'bg-[#0078d4]' },
                            { name: 'GMX', url: 'https://mail.gmx.net', initial: 'M', color: 'bg-[#1c449b]' },
                        ] %}
                            <a href="{{ provider.url }}" target="_blank" rel="noopener" class="flex items-center gap-2.5 rounded-xl border border-gray-200 bg-white px-3 py-2.5 text-[13px] font-semibold text-gray-900 transition hover:border-gray-300 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:hover:bg-gray-800">
                                <span class="grid h-6 w-6 flex-none place-items-center rounded-md text-[13px] font-bold text-white {{ provider.color }}">{{ provider.initial }}</span>
                                {{ provider.name }}
                                <svg class="ml-auto h-3.5 w-3.5 text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17 17 7"/><path d="M7 7h10v10"/></svg>
                            </a>
                        {% endfor %}
                    </div>
                </div>

                {# Troubleshooting #}
                <details class="rounded-xl bg-gray-50 px-4 dark:bg-gray-800/60">
                    <summary class="flex cursor-pointer list-none items-center gap-2 py-3 text-[13px] font-semibold text-gray-900 dark:text-white [&::-webkit-details-marker]:hidden">
                        <svg class="h-3.5 w-3.5 text-gray-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></svg>
                        {{ 'onboarding.verify.troubleTitle'|trans({}, 'cms') }}
                        <svg class="ml-auto h-3.5 w-3.5 text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
                    </summary>
                    <ul class="space-y-2 pb-3.5 text-[13px] leading-relaxed text-gray-600 dark:text-gray-300">
                        <li class="relative pl-5 before:absolute before:left-1 before:top-2 before:h-1.5 before:w-1.5 before:rounded-full before:bg-gray-400">{{ 'onboarding.verify.trouble.spam'|trans({}, 'cms') }}</li>
                        <li class="relative pl-5 before:absolute before:left-1 before:top-2 before:h-1.5 before:w-1.5 before:rounded-full before:bg-gray-400">{{ 'onboarding.verify.trouble.wait'|trans({}, 'cms') }}</li>
                        <li class="relative pl-5 before:absolute before:left-1 before:top-2 before:h-1.5 before:w-1.5 before:rounded-full before:bg-gray-400">{{ 'onboarding.verify.trouble.typo'|trans({}, 'cms') }}</li>
                    </ul>
                </details>

            </div>

            <div class="border-t border-gray-200 bg-gray-50 px-6 py-4 dark:border-gray-700 dark:bg-gray-800/60">
                <span class="inline-flex items-center gap-1.5 text-[12px] font-medium text-gray-500 dark:text-gray-400">
                    <svg class="h-3.5 w-3.5 text-emerald-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="m5 13 4 4L19 7"/></svg>
                    {{ 'onboarding.verify.waiting'|trans({}, 'cms') }}
                </span>
            </div>

        </div>
    </div>

{% endblock %}
