{% extends "@FerienpassAdmin/layout/base.html.twig" %}
{% set title = 'userAccount.security.title' %}

{% trans_default_domain 'admin' %}

{% block main %}

    <twig:Admin:PageHeader
            title="userAccount.security.title"
            subtitle="userAccount.security.subtitle"
    />

    {# Mirrors the cms-bundle account page: each section is a 3-col grid,
       with the h2/description on the left and the card on the right. No
       sidebar nav — sections stack with a hairline divider between them. #}
    <div class="divide-y divide-gray-200 dark:divide-gray-800">

        {# ─── Passwort ────────────────────────────────────────────────── #}
        {% if app.user.password is not null %}
            <div class="grid grid-cols-1 gap-x-8 gap-y-6 py-10 md:grid-cols-3">
                <div>
                    <h2 class="text-base/7 font-semibold text-gray-900 dark:text-gray-50">{{ 'changePassword.headline'|trans }}</h2>
                    <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">{{ 'changePassword.caption'|trans }}</p>
                </div>
                <div class="md:col-span-2">
                    <twig:Admin:ChangePassword/>
                </div>
            </div>
        {% endif %}

        {# ─── Passkeys ────────────────────────────────────────────────── #}
        <div class="grid grid-cols-1 gap-x-8 gap-y-6 py-10 md:grid-cols-3">
            <div>
                <h2 class="text-base/7 font-semibold text-gray-900 dark:text-gray-50">{{ 'userAccount.passkeys.title'|trans }}</h2>
                <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">{{ 'userAccount.passkeys.text'|trans }}</p>
                <p class="mt-2 text-sm/6 text-gray-500 dark:text-gray-400">{{ 'userAccount.passkeys.text2'|trans }}</p>
            </div>
            <div class="md:col-span-2">
                <twig:Admin:Passkeys/>
            </div>
        </div>

        {# ─── Anmeldemethoden ─────────────────────────────────────────── #}
        <div class="grid grid-cols-1 gap-x-8 gap-y-6 py-10 md:grid-cols-3">
            <div>
                <h2 class="text-base/7 font-semibold text-gray-900 dark:text-gray-50">{{ 'userAccount.loginMethods.title'|trans }}</h2>
                <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">{{ 'userAccount.loginMethods.text'|trans }}</p>
            </div>
            <div class="md:col-span-2">
                <twig:Admin:LoginMethods/>
            </div>
        </div>

        {# ─── API-Tokens ──────────────────────────────────────────────── #}
        <div class="grid grid-cols-1 gap-x-8 gap-y-6 py-10 md:grid-cols-3">
            <div>
                <h2 class="text-base/7 font-semibold text-gray-900 dark:text-gray-50">{{ 'apiTokens.headline'|trans }}</h2>
                <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">{{ 'apiTokens.caption'|trans }}</p>
            </div>
            <div class="md:col-span-2">
                <twig:Admin:ApiTokens/>
            </div>
        </div>

    </div>

{% endblock %}
