{% extends '@Contao/fragment/user_account/_base.html.twig' %}
{% set c = 'ferienpass/cms-account-passkey' %}

{% block main %}
<div class="grid grid-cols-1 gap-x-8 gap-y-10 py-16 md:grid-cols-3 border-t border-gray-200 dark:border-gray-800"
     data-controller="ferienpass--cms-account-passkey web-auth--webauthn-stimulus"
     data-action="webauthn:attestation:success->ferienpass--cms-account-passkey#reload"
     data-web-auth--webauthn-stimulus-creation-options-url-value="/passkey/options"
     data-web-auth--webauthn-stimulus-creation-result-url-value="/passkey/result"
     data-ferienpass--cms-account-passkey-name-url-value="{{ path('cms_account_passkey_name') }}">

    <div>
        <h2 class="text-base/7 font-semibold text-gray-900 dark:text-gray-50">{{ 'userAccount.passkeys.title'|trans({}, 'cms') }}</h2>
        <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">{{ 'userAccount.passkeys.text'|trans({}, 'cms') }}</p>
        <p class="mt-2 text-sm/6 text-gray-500 dark:text-gray-400">{{ 'userAccount.passkeys.text2'|trans({}, 'cms') }}</p>
    </div>

    <div class="md:col-span-2">
        <div class="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
            <div class="p-6">

                {% if passwordless and passkeys|length > 0 %}
                    <div class="mb-5 flex items-start gap-3 rounded-lg border border-green-300 bg-green-50 px-4 py-3 text-sm text-green-800 dark:border-green-700 dark:bg-green-900/20 dark:text-green-200">
                        <svg class="mt-0.5 h-5 w-5 flex-none" 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>
                        <span><strong class="font-semibold">{{ 'userAccount.passkeys.passwordlessStrong'|trans({}, 'cms') }}</strong> {{ 'userAccount.passkeys.passwordlessText'|trans({}, 'cms') }}</span>
                    </div>
                {% elseif passwordless %}
                    {# password = null AND no passkey: the account currently has no way to sign in. #}
                    <div class="mb-5 flex items-start gap-3 rounded-lg border border-red-300 bg-red-50 px-4 py-3 text-sm text-red-800 dark:border-red-700 dark:bg-red-900/20 dark:text-red-200">
                        <svg class="mt-0.5 h-5 w-5 flex-none" 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>
                        <span><strong class="font-semibold">{{ 'userAccount.passkeys.noLoginStrong'|trans({}, 'cms') }}</strong> {{ 'userAccount.passkeys.noLoginText'|trans({}, 'cms') }}</span>
                    </div>
                {% endif %}

                <ul class="divide-y divide-gray-200 dark:divide-gray-700">
                    {% for pk in passkeys %}
                        <li class="flex items-center gap-4 py-4">
                            <div class="grid h-10 w-10 flex-none place-items-center rounded-xl bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300">
                                <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">
                                <p class="truncate text-sm font-semibold text-gray-900 dark:text-gray-100">{{ pk.name|default('') ?: 'userAccount.passkeys.unnamed'|trans({}, 'cms') }}</p>
                                <p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">{{ 'userAccount.passkeys.created'|trans({ date: pk.createdAt|date('d.m.Y') }, 'cms') }}</p>
                            </div>
                            <form method="post" action="{{ path('cms_account_passkey_delete', { id: pk.getId }) }}" class="flex-none">
                                <input type="hidden" name="REQUEST_TOKEN" value="{{ contao_request_token() }}">
                                <button type="submit" {{ passkeys|length <= 1 ? 'disabled' : '' }}
                                        class="inline-flex items-center gap-1.5 rounded-md border border-gray-300 bg-white px-3 py-1.5 text-xs font-semibold text-gray-700 transition hover:border-red-300 hover:bg-red-50 hover:text-red-700 focus:outline-none disabled:cursor-not-allowed disabled:text-gray-400 disabled:hover:border-gray-300 disabled:hover:bg-white disabled:hover:text-gray-400 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200">
                                    <svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg>
                                    {{ 'userAccount.passkeys.remove'|trans({}, 'cms') }}
                                </button>
                            </form>
                        </li>
                    {% else %}
                        <li class="py-8 text-center text-sm text-gray-500 dark:text-gray-400">{{ 'userAccount.passkeys.empty'|trans({}, 'cms') }}</li>
                    {% endfor %}
                </ul>

                {% if passkeys|length == 1 %}
                    <div class="mt-4 flex items-start gap-2 rounded-lg bg-gray-50 px-3 py-2.5 text-xs leading-relaxed text-gray-600 dark:bg-gray-700/40 dark:text-gray-300">
                        <svg class="mt-0.5 h-3.5 w-3.5 flex-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg>
                        {{ 'userAccount.passkeys.lastHint'|trans({}, 'cms') }}
                    </div>
                {% endif %}
            </div>

            <div class="flex items-center justify-between gap-4 border-t border-gray-200 bg-gray-50 px-6 py-4 dark:border-gray-700 dark:bg-gray-800/60">
                <span class="hidden items-center gap-2 text-xs text-gray-500 sm:flex dark:text-gray-400">
                    <svg class="h-3.5 w-3.5 flex-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
                    {{ 'userAccount.passkeys.securityNote'|trans({}, 'cms') }}
                </span>
                <button type="button" {{ stimulus_action(c, 'open') }}
                        class="inline-flex items-center gap-2 rounded-md bg-gray-900 px-4 py-2 text-sm font-semibold text-white transition 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="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14"/><path d="M5 12h14"/></svg>
                    {{ 'userAccount.passkeys.add'|trans({}, 'cms') }}
                </button>
            </div>
        </div>
    </div>

    {# Hidden trigger for the WebAuthn creation ceremony, fired after the name is stored #}
    <button type="button" hidden {{ stimulus_target(c, 'webauthnButton') }} data-action="web-auth--webauthn-stimulus#signup"></button>

    {# Name-your-passkey modal #}
    <div {{ stimulus_target(c, 'modal') }} style="display: none"
         class="fixed inset-0 z-50 items-center justify-center bg-gray-900/50 p-4 backdrop-blur-sm">
        <div class="w-full max-w-md rounded-2xl border border-gray-200 bg-white p-6 shadow-xl dark:border-gray-700 dark:bg-gray-800">
            <div class="mb-4 grid h-11 w-11 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.9" 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>
            <h3 class="font-display text-lg font-bold text-gray-900 dark:text-white">{{ 'userAccount.passkeys.modalTitle'|trans({}, 'cms') }}</h3>
            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ 'userAccount.passkeys.modalText'|trans({}, 'cms') }}</p>

            <div class="mt-4">
                <label for="pk-name" class="block text-sm font-medium text-gray-700 dark:text-gray-200">{{ 'userAccount.passkeys.nameLabel'|trans({}, 'cms') }}</label>
                <input id="pk-name" type="text" {{ stimulus_target(c, 'name') }} maxlength="64"
                       placeholder="{{ 'userAccount.passkeys.namePlaceholder'|trans({}, 'cms') }}"
                       class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-900">
            </div>

            <div class="mt-6 flex justify-end gap-3">
                <button type="button" {{ stimulus_action(c, 'close') }}
                        class="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-50 focus:outline-none dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200">
                    {{ 'userAccount.passkeys.cancel'|trans({}, 'cms') }}
                </button>
                <button type="button" {{ stimulus_action(c, 'create') }}
                        class="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="2" 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>
                    {{ 'userAccount.passkeys.create'|trans({}, 'cms') }}
                </button>
            </div>
        </div>
    </div>
</div>

{# ─── Weitere Anmeldemethoden: Passwort entfernen + E-Mail-Login umschalten ─── #}
<div class="grid grid-cols-1 gap-x-8 gap-y-10 py-16 md:grid-cols-3 border-t border-gray-200 dark:border-gray-800">
    <div>
        <h2 class="text-base/7 font-semibold text-gray-900 dark:text-gray-50">{{ 'userAccount.loginMethods.title'|trans({}, 'cms') }}</h2>
        <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">{{ 'userAccount.loginMethods.text'|trans({}, 'cms') }}</p>
    </div>

    <div class="md:col-span-2">
        <div class="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
            <div class="px-6">

                {# --- Passwort entfernen --- #}
                <div class="flex flex-col gap-3 border-b border-gray-100 py-5 sm:flex-row sm:items-center sm:gap-5 dark:border-gray-700">
                    <span class="flex size-9 flex-none items-center justify-center rounded-md bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-300">
                        <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"><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg>
                    </span>
                    <div class="min-w-0 flex-1">
                        <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">{{ 'userAccount.loginMethods.removePassword.headline'|trans({}, 'cms') }}</p>
                        {% if hasPassword %}
                            <p class="mt-0.5 max-w-md text-xs text-gray-500 dark:text-gray-400">
                                {{ (passkeys|length > 0 ? 'userAccount.loginMethods.removePassword.allowed' : 'userAccount.loginMethods.removePassword.needsPasskey')|trans({}, 'cms') }}
                            </p>
                        {% else %}
                            <p class="mt-0.5 max-w-md text-xs text-gray-500 dark:text-gray-400">{{ 'userAccount.loginMethods.removePassword.already'|trans({}, 'cms') }}</p>
                        {% endif %}
                    </div>
                    {% if hasPassword %}
                        <div class="flex-none sm:pl-2">
                            <form method="post" action="{{ path('cms_account_remove_password') }}">
                                <input type="hidden" name="REQUEST_TOKEN" value="{{ contao_request_token() }}">
                                <button type="submit" {{ passkeys|length > 0 ? '' : 'disabled' }}
                                        class="inline-flex items-center gap-1.5 rounded-md border border-red-200 bg-white px-3 py-1.5 text-sm font-semibold text-red-700 transition hover:bg-red-50 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-white dark:border-red-500/20 dark:bg-red-500/5 dark:text-red-300">
                                    <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg>
                                    {{ 'userAccount.loginMethods.removePassword.button'|trans({}, 'cms') }}
                                </button>
                            </form>
                        </div>
                    {% endif %}
                </div>

                {# --- E-Mail-Login (Anmeldelink) umschalten --- #}
                <div class="flex flex-col gap-3 py-5 sm:flex-row sm:items-center sm:gap-5">
                    <span class="flex size-9 flex-none items-center justify-center rounded-md bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-300">
                        <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"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>
                    </span>
                    <div class="min-w-0 flex-1">
                        <div class="flex flex-wrap items-center gap-2">
                            <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">{{ 'userAccount.loginMethods.magicLink.headline'|trans({}, 'cms') }}</p>
                            <span class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium {{ magicLinksDisabled ? 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300' : 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-200' }}">
                                {{ (magicLinksDisabled ? 'userAccount.loginMethods.magicLink.statusOff' : 'userAccount.loginMethods.magicLink.statusOn')|trans({}, 'cms') }}
                            </span>
                        </div>
                        <p class="mt-0.5 max-w-md text-xs text-gray-500 dark:text-gray-400">
                            {{ (magicLinksDisabled ? 'userAccount.loginMethods.magicLink.disabledHint' : 'userAccount.loginMethods.magicLink.enabledHint')|trans({}, 'cms') }}
                        </p>
                    </div>
                    <div class="flex-none sm:pl-2">
                        <form method="post" action="{{ path('cms_account_toggle_magic_links') }}">
                            <input type="hidden" name="REQUEST_TOKEN" value="{{ contao_request_token() }}">
                            <button type="submit"
                                    class="inline-flex items-center gap-1.5 rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm font-semibold text-gray-700 transition hover:bg-gray-50 focus:outline-none dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200">
                                {{ (magicLinksDisabled ? 'userAccount.loginMethods.magicLink.enable' : 'userAccount.loginMethods.magicLink.disable')|trans({}, 'cms') }}
                            </button>
                        </form>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
{% endblock %}
