{% extends "phoxtail_core/modal_drawer.html" %}
{% comment %}
A token (level 0), titled by its name: its details and, while it is active
and the viewer may, Revoke. A revoke closes the drawer, and the list redraws
itself.
{% endcomment %}
{% load i18n phoxtail_design_tags %}
{% block title %}{{ token.name }}{% endblock %}
{% block body %}
    <div class="phoxtail-form-stack">
        <div class="phx-card">
            <h3 class="phx-card__title">
                {% icon "vpn_key" %}
                {% translate "Token" %}
            </h3>
            {% if token.description %}<p class="phx-card__text">{{ token.description }}</p>{% endif %}
            <div class="phx-card__meta">
                <div class="phx-card__meta-row">
                    {% icon "key" %}
                    <span class="phx-card__meta-value">{{ token.token_fingerprint }}</span>
                </div>
                {% if can_manage_all %}
                    <div class="phx-card__meta-row">
                        {% icon "person" %}
                        <span class="phx-card__meta-value phx-card__meta-value--truncate">{{ token.user.get_full_name|default:token.user.email }}</span>
                    </div>
                {% endif %}
            </div>
        </div>
        <div class="phx-card">
            <h3 class="phx-card__title">
                {% icon "lock" %}
                {% translate "Access" %}
            </h3>
            <div class="phx-card__meta">
                <div class="phx-card__meta-row">
                    {% icon "tune" %}
                    <span class="phx-card__meta-value">
                        {% if token.unrestricted %}
                            {% translate "Unrestricted: anything its owner can do" %}
                        {% else %}
                            {{ token.scopes|join:", " }}
                        {% endif %}
                    </span>
                </div>
                <div class="phx-card__meta-row">
                    {% icon "calendar_lock" %}
                    <span class="phx-card__meta-value">
                        {% if token.expires_at %}
                            {% blocktranslate with expires_at=token.expires_at|date:"M j, Y H:i" %}Expires {{ expires_at }}{% endblocktranslate %}
                        {% else %}
                            {% translate "Never expires" %}
                        {% endif %}
                    </span>
                </div>
            </div>
        </div>
        <div class="phx-card">
            <h3 class="phx-card__title">
                {% icon "schedule" %}
                {% translate "Activity" %}
            </h3>
            <div class="phx-card__meta">
                <div class="phx-card__meta-row">
                    {% icon "calendar_month" %}
                    <span class="phx-card__meta-value">{% blocktranslate with created_at=token.created_at|date:"M j, Y H:i" %}Created {{ created_at }}{% endblocktranslate %}</span>
                </div>
                <div class="phx-card__meta-row">
                    {% icon "schedule" %}
                    <span class="phx-card__meta-value">
                        {% if token.last_used_at %}
                            {% blocktranslate with last_used_at=token.last_used_at|date:"M j, Y H:i" %}Last used {{ last_used_at }}{% endblocktranslate %}
                        {% else %}
                            {% translate "Never used" %}
                        {% endif %}
                    </span>
                </div>
                {% if token.revoked_at %}
                    <div class="phx-card__meta-row">
                        {% icon "cancel" %}
                        <span class="phx-card__meta-value">{% blocktranslate with revoked_at=token.revoked_at|date:"M j, Y H:i" %}Revoked {{ revoked_at }}{% endblocktranslate %}</span>
                    </div>
                {% endif %}
            </div>
        </div>
        {% if can_revoke and token.is_active %}
            <div class="phx-card">
                <h3 class="phx-card__title">
                    {% icon "danger" %}
                    {% translate "Revoke token" %}
                </h3>
                <p class="phx-card__text">
                    {% translate "Any client or script using this token stops working at once. This cannot be undone." %}
                </p>
                <div id="token-revoke-csrf" hidden>{% csrf_token %}</div>
                <button class="phx-button phx-button--danger phx-button--full"
                        type="button"
                        hx-post="{% url 'access_tokens_management:admin_token_revoke' token.uuid %}"
                        hx-include="#token-revoke-csrf"
                        hx-swap="none"
                        hx-disabled-elt="this, #base-modal .phoxtail-drawer__footer button"
                        hx-confirm="{% blocktranslate with name=token.name %}Revoke '{{ name }}'? This cannot be undone.{% endblocktranslate %}">
                    <span>{% translate "Revoke" %}</span>
                </button>
            </div>
        {% endif %}
    </div>
{% endblock %}