{% load i18n %}
{% load bootstrap_icons %}
{# the tokens of the signed-in user, or of owner on a superuser's view of a user: the items of a list-group #}
{% for token in api_tokens %}
<div class="list-group-item py-3">
    <div class="d-flex justify-content-between align-items-center gap-2">
        <span class="fw-semibold text-break">{{ token.name }}</span>
        <div class="dropdown">
            <button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="dropdown" aria-expanded="false"
                    aria-label="{% blocktrans with name=token.name %}Actions for API token {{ name }}{% endblocktrans %}">{% bs_icon 'three-dots' %}</button>
            <ul class="dropdown-menu dropdown-menu-end">
                <li><a class="dropdown-item text-danger" href="{% if owner %}{% url 'accounts:account_api_token_delete' owner.id token.token_key %}{% else %}{% url 'accounts:api_token_delete' token.token_key %}{% endif %}">{% trans "Delete" %}</a></li>
            </ul>
        </div>
    </div>
    <div class="small mt-1">{% trans "Starts with" %} <code>{{ token.token_key }}</code></div>
    <div class="row g-2 small mt-1">
        <div class="col-12 col-md-4"><span class="text-body-secondary">{% trans "Created" %}</span> <span class="text-nowrap">{{ token.created|date:"Y-m-d H:i" }}</span></div>
        <div class="col-12 col-md-4"><span class="text-body-secondary">{% trans "Expires" %}</span> <span class="text-nowrap">{% if token.expiry %}{{ token.expiry|date:"Y-m-d H:i" }}{% else %}{% trans "never" %}{% endif %}</span></div>
        <div class="col-12 col-md-4"><span class="text-body-secondary">{% trans "Last used" %}</span> <span class="text-nowrap">{% if token.last_used %}{{ token.last_used|date:"Y-m-d H:i" }}{% else %}{% trans "never" %}{% endif %}</span></div>
    </div>
</div>
{% empty %}
<div class="list-group-item text-body-secondary">{% trans "No API tokens." %}</div>
{% endfor %}