{% trans_default_domain 'admin' %}

<div {{ attributes.defaults({ class: 'overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800' }) }}>

    {# Section header (icon + title + description) is rendered by the
       surrounding page (security.html.twig) in the cms-bundle 3-col layout. #}

    <div class="px-6 py-2">

        {# --- Remove password row --- #}
        <div class="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-5 py-4 border-b border-gray-100 dark:border-gray-700">
            <span class="size-9 rounded-md bg-gray-100 text-gray-500 flex items-center justify-center shrink-0 dark:bg-gray-700 dark:text-gray-300">
                <twig:ux:icon name="ph:lock" class="size-5" />
            </span>
            <div class="flex-1 min-w-0">
                <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">{{ 'userAccount.loginMethods.removePassword.headline'|trans }}</p>
                {% if hasPassword %}
                    <p class="text-xs text-gray-500 mt-0.5 max-w-md dark:text-gray-400">
                        {% if passkeyCount > 0 %}
                            {{ 'userAccount.loginMethods.removePassword.allowed'|trans }}
                        {% else %}
                            {{ 'userAccount.loginMethods.removePassword.needsPasskey'|trans }}
                        {% endif %}
                    </p>
                {% else %}
                    <p class="text-xs text-gray-500 mt-0.5 max-w-md dark:text-gray-400">{{ 'userAccount.loginMethods.removePassword.already'|trans }}</p>
                {% endif %}
            </div>
            <div class="shrink-0 sm:pl-2">
                {% if hasPassword %}
                    <form method="post" action="{{ path('admin_security_remove_password') }}">
                        <input type="hidden" name="_token" value="{{ csrf_token('submit') }}">
                        <button type="submit" {{ passkeyCount > 0 ? '' : 'disabled' }}
                                class="inline-flex items-center gap-1.5 rounded-md bg-white text-red-700 shadow-sm ring-1 ring-inset ring-red-200 hover:bg-red-50 px-3 py-1.5 text-sm font-semibold transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-400 disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none dark:bg-red-500/5 dark:text-red-300 dark:ring-red-500/20">
                            <twig:ux:icon name="ph:trash" class="size-4" />
                            Passwort entfernen
                        </button>
                    </form>
                {% else %}
                    <twig:Admin:Badge color="gray" :content="'userAccount.loginMethods.removePassword.absent'|trans" />
                {% endif %}
            </div>
        </div>

        {# --- Magic-link toggle ---
           ROLE_ADMIN users see the "globally off" banner unless the operator
           has opted in via ferienpass_admin.enable_admin_magic_links (which
           defaults false — admins are denied magic links unless explicitly
           enabled). ROLE_HOST users always see the per-user toggle (the flag
           doesn't apply to them — they keep magic-link as a recovery option). #}
        {% if magicLinksUnavailableForMe %}
            <twig:Admin:Alert type="warning" class="my-3">
                {{ 'userAccount.loginMethods.magicGloballyOff'|trans({}, 'admin') }}
            </twig:Admin:Alert>
        {% else %}
            <div class="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-5 py-4">
                <span class="size-9 rounded-md bg-gray-100 text-gray-500 flex items-center justify-center shrink-0 dark:bg-gray-700 dark:text-gray-300">
                    <twig:ux:icon name="ph:envelope" class="size-5" />
                </span>
                <div class="flex-1 min-w-0">
                    <div class="flex items-center gap-2 flex-wrap">
                        <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">{{ 'userAccount.loginMethods.magicLink.headline'|trans }}</p>
                        <twig:Admin:Badge
                                :color="magicLinksDisabledByUser ? 'gray' : 'green'"
                                :content="(magicLinksDisabledByUser ? 'userAccount.loginMethods.magicLink.statusOff' : 'userAccount.loginMethods.magicLink.statusOn')|trans"
                        />
                    </div>
                    <p class="text-xs text-gray-500 mt-0.5 max-w-md dark:text-gray-400">
                        {{ magicLinksDisabledByUser
                            ? 'userAccount.loginMethods.magicLink.disabledHint'|trans
                            : 'userAccount.loginMethods.magicLink.enabledHint'|trans
                        }}
                    </p>
                </div>
                <div class="shrink-0 sm:pl-2">
                    <form method="post" action="{{ path('admin_security_toggle_magic_links') }}">
                        <input type="hidden" name="_token" value="{{ csrf_token('submit') }}">
                        <twig:Admin:Button type="submit" variant="secondary" size="sm">
                            {{ magicLinksDisabledByUser ? 'Anmeldelink wieder aktivieren' : 'Anmeldelink deaktivieren' }}
                        </twig:Admin:Button>
                    </form>
                </div>
            </div>
        {% endif %}

    </div>

</div>
