<!-- htmlhint doctype-first:false -->
{% for token in data %}
<div class="border border-gray-200 dark:border-gray-600 rounded-lg p-4 mb-4">
  <div class="flex justify-between items-start">
    <div class="flex-1">
      <div class="flex items-center flex-wrap gap-2">
        <h4 class="text-lg font-medium text-gray-900 dark:text-white">
          {{ token.name }}
        </h4>
        {% if token.is_active %}
        <span
          class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100"
          >Active</span
        >
        {% else %}
        <span
          class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100"
          >Inactive</span
        >
        {% endif %} {% if token.is_revoked %}
        <span
          class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100"
          >Revoked</span
        >
        {% endif %} {% if token.team_name %}
        <span
          class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800 dark:bg-purple-800 dark:text-purple-100"
          >Team: {{ token.team_name }}</span
        >
        {% else %}
        <span
          class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300"
          >All Teams</span
        >
        {% endif %} {% if token.server_id %}
        <span
          class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-100"
          >Server-scoped</span
        >
        {% endif %} {% if token.ip_restrictions and token.ip_restrictions|length
        > 0 %}
        <span
          class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-800 dark:bg-orange-800 dark:text-orange-100"
          >{{ token.ip_restrictions|length }} IP{{ 's' if
          token.ip_restrictions|length > 1 else '' }}</span
        >
        {% endif %}
      </div>
      {% if token.description %}
      <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
        {{ token.description }}
      </p>
      {% endif %}
      <div
        class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-3 text-sm text-gray-500 dark:text-gray-400"
      >
        <div>
          <span class="font-medium">Created:</span> {{
          token.created_at.split('T')[0] if token.created_at else 'Never' }}
        </div>
        <div>
          <span class="font-medium">Expires:</span> {{
          token.expires_at.split('T')[0] if token.expires_at else 'Never' }}
        </div>
        <div>
          <span class="font-medium">Last Used:</span> {{
          token.last_used.split('T')[0] if token.last_used else 'Never' }}
        </div>
      </div>
      {% if token.server_id %}
      <div class="mt-2 text-sm">
        <span class="font-medium text-gray-700 dark:text-gray-300"
          >Scoped to Server:</span
        >
        {{ token.server_id }}
      </div>
      {% endif %} {% if token.resource_scopes and token.resource_scopes|length >
      0 %}
      <div class="mt-1 text-sm">
        <span class="font-medium text-gray-700 dark:text-gray-300"
          >Permissions:</span
        >
        {{ token.resource_scopes|join(', ') }}
      </div>
      {% endif %}
    </div>
    <div class="flex flex-wrap gap-2 ml-4">
      <button
        data-action="token-details"
        data-token="{{ token._json }}"
        class="px-3 py-1 text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 border border-gray-300 dark:border-gray-600 hover:border-gray-500 dark:hover:border-gray-400 rounded-md"
      >
        Details
      </button>
      <button
        data-action="token-usage"
        data-token-id="{{ token.id }}"
        class="px-3 py-1 text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 border border-blue-300 dark:border-blue-600 hover:border-blue-500 dark:hover:border-blue-400 rounded-md"
      >
        Usage Stats
      </button>
      {% if token.is_active and not token.is_revoked %}
      <button
        data-action="token-revoke"
        data-token-id="{{ token.id }}"
        data-token-name="{{ token.name }}"
        class="px-3 py-1 text-sm font-medium text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300 border border-red-300 dark:border-red-600 hover:border-red-500 dark:hover:border-red-400 rounded-md"
      >
        Revoke
      </button>
      {% endif %}
    </div>
  </div>
</div>
{% endfor %} {% if not data %}
<p class="text-gray-500 dark:text-gray-400">
  No tokens found. Create your first token above.
</p>
{% endif %}

<!-- Out-of-band swap for pagination controls -->
<div id="tokens-pagination-controls" hx-swap-oob="true">
  {% set base_url = root_path + '/admin/tokens/partial' %} {% set hx_target =
  '#tokens-table' %} {% set hx_swap = 'outerHTML' %} {% set hx_indicator = '#tokens-loading' %} {% set
  table_name = 'tokens' %} {% set query_params = {'include_inactive':
  include_inactive} %} {% if team_id %}{% set _ = query_params.update({'team_id': team_id}) %}{% endif %} {% include
  'pagination_controls.html' %}
</div>
