{% 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' }) }}>

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

        {% if existingTokens is empty %}
            <div class="rounded-lg border-2 border-dashed border-gray-200 px-6 py-10 text-center dark:border-gray-700">
                <span class="inline-flex size-12 rounded-full bg-gray-100 text-gray-400 items-center justify-center mb-3 dark:bg-gray-700 dark:text-gray-500">
                    <twig:ux:icon name="ph:terminal-window" class="size-6" />
                </span>
                <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">{{ 'apiTokens.empty.title'|trans }}</h3>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400 max-w-sm mx-auto">{{ 'apiTokens.empty.text'|trans }}</p>
            </div>
        {% else %}
            <ul class="divide-y divide-gray-100 -my-1 dark:divide-gray-700">
                {% for token in existingTokens %}
                    <li class="flex items-center gap-4 py-3">
                        <span class="size-10 rounded-lg 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:terminal-window" class="size-5" />
                        </span>
                        <div class="flex-1 min-w-0">
                            <div class="text-sm font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2 flex-wrap">
                                <code class="font-mono">{{ token.locator }}.******</code>
                                {% for scope in token.scopes %}
                                    <twig:Admin:Badge color="gray" :content="scope" />
                                {% endfor %}
                            </div>
                            <div class="text-xs text-gray-500 mt-0.5 flex items-center gap-1.5 flex-wrap dark:text-gray-400">
                                <span>{{ 'apiTokens.row.created'|trans({ date: token.createdAt|format_datetime }) }}</span>
                                <span class="text-gray-300 dark:text-gray-600">·</span>
                                <span>{{ token.validUntil
                                    ? 'apiTokens.row.validUntil'|trans({ date: token.validUntil|format_datetime })
                                    : 'apiTokens.row.noExpiry'|trans
                                }}</span>
                            </div>
                        </div>
                        <form method="post" action="{{ path('admin_security_api_token_revoke', { id: token.id }) }}"
                              onsubmit="return confirm('{{ 'apiTokens.row.revokeConfirm'|trans|e('js') }}');">
                            <input type="hidden" name="_token" value="{{ csrf_token('submit') }}">
                            <button type="submit"
                                    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 dark:bg-red-500/5 dark:text-red-300 dark:ring-red-500/20">
                                <twig:ux:icon name="ph:trash" class="size-4" />
                                {{ 'apiTokens.row.revoke'|trans }}
                            </button>
                        </form>
                    </li>
                {% endfor %}
            </ul>
        {% endif %}

    </div>

    <div class="flex items-center justify-end gap-3 border-t border-gray-200 bg-gray-50/60 px-6 py-3 dark:border-gray-700 dark:bg-gray-800/60">
        <twig:Admin:Button
                href="{{ path('admin_security_api_token') }}"
                variant="dark"
                size="sm"
                data-turbo-frame="modal">
            <twig:ux:icon name="ph:plus" class="size-4 mr-1.5" />
            Neuer API-Token
        </twig:Admin:Button>
    </div>

</div>
