{% if new_key %}
<div class="mb-4 bg-green-900 border border-green-700 rounded-lg p-4">
    <div class="flex items-start">
        <svg class="w-5 h-5 text-green-400 mr-3 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>
        <div class="flex-1">
            <p class="text-green-200 font-medium text-sm mb-1">Key created — save it now, it won't be shown again!</p>
            <code class="block bg-gray-900 rounded px-3 py-2 text-green-100 text-sm font-mono break-all select-all">{{ new_key }}</code>
        </div>
    </div>
</div>
{% endif %}

<!-- Keys Table -->
<div class="bg-gray-800 rounded-xl border border-gray-700 overflow-hidden">
    {% if keys %}
    <table class="w-full">
        <thead>
            <tr class="bg-gray-900 border-b border-gray-700">
                <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">ID</th>
                <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Name</th>
                <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Prefix</th>
                <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Status</th>
                <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Created</th>
                <th class="px-4 py-3 text-right text-xs font-medium text-gray-400 uppercase tracking-wider">Actions</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-700">
            {% for key in keys %}
            <tr class="hover:bg-gray-750">
                <td class="px-4 py-3 text-sm text-gray-300 font-mono">{{ key.id }}</td>
                <td class="px-4 py-3 text-sm text-white">{{ key.name }}</td>
                <td class="px-4 py-3 text-sm text-gray-400 font-mono">{{ key.prefix }}…</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-green-900 text-green-200">Active</span>
                    {% else %}
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-900 text-red-200">Revoked</span>
                    {% endif %}
                </td>
                <td class="px-4 py-3 text-sm text-gray-400">{{ key.created_at }}</td>
                <td class="px-4 py-3 text-right">
                    {% if key.is_active %}
                    <button hx-delete="/dashboard/api/keys/{{ key.id }}"
                            hx-target="#keys-content"
                            hx-swap="innerHTML"
                            hx-confirm="Are you sure you want to revoke this key?"
                            class="inline-flex items-center px-3 py-1 border border-red-700 rounded-md text-xs font-medium text-red-400 hover:bg-red-900 hover:text-red-200 transition-colors cursor-pointer">
                        Revoke
                    </button>
                    {% endif %}
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% else %}
    <div class="px-6 py-12 text-center">
        <p class="text-gray-400">No API keys yet. Create one above.</p>
    </div>
    {% endif %}
</div>