{% extends "wagtailadmin/generic/base.html" %}
{% load i18n wagtailadmin_tags %}

{% block main_header %}
    <div class="nice-padding w-mt-8">
        <h2 class="w-relative w-h1" id="header-title">
            {% if header_icon %}
                {% icon classname="w-absolute w-top-1 -w-left-11 w-max-w-[1em] w-max-h-[1em]" name=header_icon %}
            {% endif %}
            <span>{{ page_title }}</span>
        </h2>
    </div>
{% endblock %}

{% block main_content %}
    {% panel id="token" %}
        <p>
            {% blocktrans trimmed with name=object.name %}
                The token "{{ name }}" has been created, copy it now, it will never be shown again.
            {% endblocktrans %}
        </p>
        <div data-controller="w-clipboard w-clone" data-w-clone-auto-clear-value="5_000" data-action="w-clipboard:copy->w-clone#clear w-clipboard:copied->w-clone#add w-clipboard:error->w-clone#add">
            <label class="w-sr-only" for="api-token-value">{% trans "API token" %}</label>
            <input
                type="text"
                readonly
                class="w-w-full"
                id="api-token-value"
                value="{{ token }}"
                data-controller="w-action"
                data-action="focus->w-action#select"
                data-w-clipboard-target="value"
            />
            <div class="w-flex w-flex-wrap w-items-center w-gap-3 w-mt-6">
                <button type="button" class="button button-secondary" data-action="w-clipboard#copy" aria-describedby="clipboard-tooltip">
                    {% trans "Copy token" %}
                </button>
                <a href="{% url 'wagtailusers_api_tokens:index' %}" class="button">
                    {% trans "Back to API tokens" %}
                </a>
            </div>
            <div class="clipboard-tooltip w-mt-3" data-w-clone-target="container" id="clipboard-tooltip" aria-atomic="true" aria-live="polite"></div>
            <template data-w-clone-target="template" data-type="success">
                <span class="w-inline-block w-text-grey-50 w-bg-positive-100 w-px-2 w-py-1 w-rounded-sm">{% trans "Copied to clipboard" %}</span>
            </template>
            <template data-w-clone-target="template" data-type="error">
                <span class="w-inline-block w-text-grey-50 w-bg-critical-100 w-px-2 w-py-1 w-rounded-sm">{% trans "Copying failed — please select and copy the token manually." %}</span>
            </template>
        </div>
    {% endpanel %}
{% endblock %}