{% extends "pages/api_keys/base.html" %}
{% from "components.html" import button, feedback %}
{% set settings_title = "API keys" %}
{% block settings_actions %}{% if not unavailable %}{{ button("Create API key", url_for("api_key_create")) }}{% endif %}{% endblock %}
{% block settings_content %}
  {% if unavailable %}{{ feedback("API keys require server configuration. Contact your administrator.") }}{% else %}
  {% if revoked %}{{ feedback("API key permanently revoked.", "success", id="key-status", focus=true) }}{% endif %}
  <p>Keys use your current permissions{% if requires_export_access %} and read only the datasets you can export{% endif %}. Keep at most five active keys. To rotate, create a replacement, update your integration, then revoke the old key.</p>
  {% if keys %}
  <div class="table-scroll" tabindex="0" role="region" aria-label="Your API keys">
    <table class="api-key-table"><caption class="visually-hidden">Your API key history</caption>
      <thead><tr><th scope="col">Name</th><th class="api-key-identifier" scope="col">Identifier</th><th scope="col">Created</th><th scope="col">Expires</th><th scope="col">Last used</th><th scope="col">Status</th><th scope="col">Action</th></tr></thead>
      <tbody>{% for key in keys %}<tr>
        <th scope="row">{{ key.name }}</th><td class="api-key-identifier"><code tabindex="0" title="{{ key.prefix }}" aria-label="Identifier {{ key.prefix }}">{{ key.prefix }}</code></td>
        <td><time datetime="{{ key.created_at.isoformat() }}">{{ key.created_at|absolute_utc }}</time></td>
        <td><time datetime="{{ key.expires_at.isoformat() }}">{{ key.expires_at|absolute_utc }}</time></td>
        <td>{% if key.last_used_at %}<time datetime="{{ key.last_used_at.isoformat() }}">{{ key.last_used_at|absolute_utc }}</time>{% else %}Never{% endif %}</td>
        <td>{{ key.status }}</td><td>{% if key.status != "Revoked" %}<a class="button button-secondary button-table-action" href="{{ url_for('api_key_revoke', key_id=key.id) }}" aria-label="Revoke {{ key.name }}">Revoke</a>{% else %}—{% endif %}</td>
      </tr>{% endfor %}</tbody>
    </table>
  </div>
  {% else %}<div class="empty-state"><h2>No API keys yet</h2><p>Create a key for your integration. Its secret will be shown only once.</p></div>{% endif %}
  {% endif %}
{% endblock %}