{% 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;">
    <div>
      <h1>Clés API</h1>
      <p>Gérez les clés d'accès API. Les clés ne sont visibles qu'à la création.</p>
    </div>
    <a href="{% url 'xeolux_securitykit:api_key_create' %}" class="btn btn-primary">+ Créer une clé</a>
  </div>
</div>

<div class="card">
  <table>
    <thead>
      <tr>
        <th>Nom</th>
        <th>Préfixe</th>
        <th>Routes autorisées</th>
        <th>Expiration</th>
        <th>Statut</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {% for key in keys %}
      <tr>
        <td>{{ key.name }}</td>
        <td><code>{{ key.key_prefix }}...</code></td>
        <td>{{ key.allowed_routes|default:"Toutes" }}</td>
        <td>{{ 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-warn">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-danger btn-sm" onclick="return confirm('Révoquer cette clé ?')">Révoquer</button>
          </form>
          {% endif %}
        </td>
      </tr>
      {% empty %}
      <tr><td colspan="6" style="color: var(--text-muted);">Aucune clé API.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}