{% extends "@FerienpassAdmin/layout/modalBase.html.twig" %}

{% block main %}

    {% if form is defined %}

        <h3 class="text-base font-semibold leading-6 text-gray-900">API-Token erstellen</h3>
        <div class="mt-2 max-w-xl text-sm text-gray-500">
            <p>Mit folgender Aktion wird ein neuer API-Token mit Ihrem Account verknüpft. Dieser API-Token ermöglicht
                dann Zugriff auf Ihren Account.</p>
        </div>
        <div class="mt-5">
            {{ form_start(form) }}

                <div>
                    {{ form_row(form['api:offer'], { attr: { class: 'flex items-center space-x-3' }}) }}
                </div>

            <div class="mt-5">
                <twig:Admin:Button variant="primary" type="submit">API-Token erstellen</twig:Admin:Button>
            </div>
            {{ form_end(form) }}
        </div>

    {% else %}

        <h3 class="text-base font-semibold leading-6 text-gray-900">API-Token erstellen</h3>
        <div class="mt-2 max-w-xl text-sm text-gray-500">
            <p>Hier ist Ihr API-Token. Dieser wird nur einmal angezeigt. Bitte bewahren Sie ihn sicher auf.</p>
        </div>
        <div class="mt-5">
            <dl class="text-base text-gray-900">
                <div class="flex space-x-2 leading-6">
                    <dt class="font-semibold">Accountinhaber:</dt>
                    <dd>{{ token.ownedBy.name }}</dd>
                </div>

                <div class="flex space-x-2 leading-6">
                    <dt class="font-semibold">Scopes:</dt>
                    <dd class="font-mono">{{ token.scopes | join(', ') }}</dd>
                </div>

                <div class="flex space-x-2 leading-6">
                    <dt class="font-semibold">Token:</dt>
                    <dd class="font-mono">{{ apiToken }}</dd>
                </div>
            </dl>
        </div>

    {% endif %}

{% endblock %}
