{% extends "xeolux_securitykit/base.html" %}
{% block title %}Clés API{% endblock %}

{% block content %}
<div class="page-header">
  <div style="display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:12px;">
    <div>
      <h1>Clés API</h1>
      <p>Les clés ne sont affichées qu'une seule fois à la création.</p>
    </div>
    <a href="{% url 'xeolux_securitykit:api_key_create' %}" class="btn btn-primary">+ Créer une clé</a>
  </div>
</div>

{% if new_key %}
<div class="alert alert-success">
  <div>
    <strong>Clé créée.</strong> Copiez-la maintenant, elle ne sera plus affichée.<br>
    <code style="font-size:13px; display:block; margin-top:6px; color:var(--green);">{{ new_key }}</code>
  </div>
</div>
{% endif %}

<div class="card">
  <div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th>Nom</th>
          <th>Préfixe</th>
          <th>Routes</th>
          <th>Expiration</th>
          <th>Statut</th>
          <th style="width:90px;"></th>
        </tr>
      </thead>
      <tbody>
        {% for key in keys %}
        <tr>
          <td style="font-weight:500;">{{ key.name }}</td>
          <td><code>{{ key.key_prefix }}…</code></td>
          <td style="color:var(--label-3); font-size:12px;">{{ key.allowed_routes|default:"Toutes" }}</td>
          <td style="color:var(--label-3); font-size:12px;">{{ key.expires_at|date:"d/m/Y"|default:"Jamais" }}</td>
          <td>
            {% if key.enabled %}
              <span class="badge badge-ok">Active</span>
            {% else %}
              <span class="badge badge-neutral">Révoquée</span>
            {% endif %}
          </td>
          <td>
            {% if key.enabled %}
            <form method="post" action="{% url 'xeolux_securitykit:api_key_revoke' key.pk %}">
              {% csrf_token %}
              <button type="submit" class="btn btn-sm btn-outline" style="color:var(--red);" onclick="return confirm('Révoquer cette clé ?')">Révoquer</button>
            </form>
            {% endif %}
          </td>
        </tr>
        {% empty %}
        <tr><td colspan="6">
          <div class="empty-state"><div class="empty-icon">⚿</div><p>Aucune clé API créée.</p></div>
        </td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}