{% load i18n phoxtail_core_tags phoxtail_design_tags %}
<!-- Hidden forms so HTMX requests carry filter/search state -->
<div id="tokens-filters-form-placeholder" style="display: none;">{% for field in filterset.form %}{% if field.name != "search" %}{{ field }}{% endif %}{% endfor %}</div>
<div id="tokens-filters-without-search-form-placeholder"
     style="display: none">{% include 'phoxtail_tokens/admin/partials/forms/filters/form_content.html' %}</div>
{% include 'phoxtail_tokens/admin/partials/header.html' %}
<!-- Token Cards -->
{% if tokens %}
    <div class="phx-grid">
        {% for t in tokens %}
            <div class="phx-card phx-card--clickable">
                <h4 class="phx-card__title">{{ t.name }}</h4>
                <div class="phx-card__meta">
                    <div class="phx-card__meta-row">
                        {% icon "key" %}
                        <span class="phx-card__meta-value">{{ t.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">{{ t.user.get_full_name|default:t.user.email }}</span>
                        </div>
                    {% endif %}
                    <div class="phx-card__meta-row">
                        {% icon "calendar_month" %}
                        <span class="phx-card__meta-value">{% blocktranslate with created_at=t.created_at|date:"M j, Y" %}Created {{ created_at }}{% endblocktranslate %}</span>
                    </div>
                    <div class="phx-card__meta-row">
                        {% icon "schedule" %}
                        <span class="phx-card__meta-value">
                            {% if t.last_used_at %}
                                {% blocktranslate with last_used_at=t.last_used_at|date:"M j, Y H:i" %}Last used {{ last_used_at }}{% endblocktranslate %}
                            {% else %}
                                {% translate "Never used" %}
                            {% endif %}
                        </span>
                    </div>
                    {% if t.expires_at %}
                        <div class="phx-card__meta-row">
                            {% icon "calendar_lock" %}
                            <span class="phx-card__meta-value">{% blocktranslate with expires_at=t.expires_at|date:"M j, Y" %}Expires {{ expires_at }}{% endblocktranslate %}</span>
                        </div>
                    {% endif %}
                    {% if t.revoked_at %}
                        <div class="phx-card__meta-row">
                            <span class="phx-tag phx-tag--destructive">{% translate "Revoked" %}</span>
                        </div>
                    {% elif not t.is_active %}
                        <div class="phx-card__meta-row">
                            <span class="phx-tag phx-tag--warning">{% translate "Expired" %}</span>
                        </div>
                    {% endif %}
                </div>
                {% url 'access_tokens_management:admin_token_detail_form' t.uuid as detail_url %}
                <button class="phx-card__button"
                        type="button"
                        hx-get="{% url 'phoxtail_core:modal' %}"
                        hx-vals='{"content_url": "{{ detail_url }}"}'
                        hx-target="#core-modal-placeholder-wrapper"
                        hx-swap="innerHTML"
                        aria-label="{% blocktranslate with name=t.name %}View token {{ name }}{% endblocktranslate %}">
                </button>
            </div>
        {% endfor %}
    </div>
{% else %}
    <div class="phx-empty phx-card">
        <h3 class="phx-empty__title">{% translate "No tokens found" %}</h3>
        <p class="phx-empty__text">
            {% if filter_count > 0 or filterset.form.search.value %}
                {% translate "Try clearing your search or filters." %}
            {% elif can_create %}
                {% blocktranslate trimmed %}Click <strong>Create</strong> to mint your first API token.{% endblocktranslate %}
            {% else %}
                {% translate "You don't have permission to create tokens." %}
            {% endif %}
        </p>
    </div>
{% endif %}
<!-- Pagination -->
{% url 'access_tokens_management:admin_tokens_filters' as filters_url %}
{% paginator tokens url=filters_url include="#tokens-filters-form-placeholder, #tokens-search-form" param="filter-page" %}