{% extends "django_meta_whatsapp/base.html" %}
{% block title %}API Keys{% endblock %}
{% block page_title %}API Keys{% endblock %}
{% block topbar_actions %}
<a href="{% url 'django_meta_whatsapp:apikey_create' %}" class="inline-flex items-center gap-2 bg-emerald-600 hover:bg-emerald-700 text-white text-sm font-medium px-4 py-2 rounded-lg">
  <i data-lucide="plus" class="w-4 h-4"></i> Create Key
</a>
{% endblock %}
{% block content %}
<div class="space-y-4">
  <div class="bg-amber-50 border border-amber-200 rounded-lg px-4 py-3 text-sm text-amber-700 flex items-start gap-2">
    <i data-lucide="alert-triangle" class="w-4 h-4 flex-shrink-0 mt-0.5"></i>
    Pass the key in your requests as the <code>X-API-Key</code> header or <code>?api_key=</code> query param.
  </div>
  <div class="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
    <table class="w-full">
      <thead class="bg-gray-50 border-b border-gray-100">
        <tr>
          <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Name</th>
          <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Key</th>
          <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Status</th>
          <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Created</th>
          <th class="px-4 py-3 text-right text-xs font-semibold text-gray-500 uppercase tracking-wider">Actions</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-gray-50">
        {% for key in api_keys %}
        <tr class="hover:bg-gray-50">
          <td class="px-4 py-3 text-sm font-medium text-gray-900">{{ key.name }}</td>
          <td class="px-4 py-3 text-sm font-mono text-gray-500 select-all">{{ key.key }}</td>
          <td class="px-4 py-3">
            {% if key.is_active %}<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-emerald-100 text-emerald-700">Active</span>
            {% else %}<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-500">Revoked</span>{% endif %}
          </td>
          <td class="px-4 py-3 text-sm text-gray-400">{{ key.created_at|date:"d M Y" }}</td>
          <td class="px-4 py-3 text-right">
            <a href="{% url 'django_meta_whatsapp:apikey_delete' key.pk %}" class="text-gray-400 hover:text-red-600"><i data-lucide="trash-2" class="w-4 h-4"></i></a>
          </td>
        </tr>
        {% empty %}
        <tr><td colspan="5" class="px-4 py-12 text-center text-sm text-gray-400">No API keys yet.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}