{% extends "base.html" %}
{% block title %}API Keys - Janus{% endblock %}
{% block keys_active %}bg-gray-700 text-white{% endblock %}

{% block content %}
<h1 class="text-2xl font-bold text-white mb-6">API Keys</h1>

<!-- Create Form -->
<div class="bg-gray-800 rounded-xl p-6 border border-gray-700 mb-6">
    <h2 class="text-lg font-semibold text-white mb-4">Create New Key</h2>
    <form hx-post="/dashboard/api/keys"
          hx-target="#keys-content"
          hx-swap="innerHTML"
          class="flex items-center gap-3">
        <input type="text"
               name="name"
               placeholder="Key name (e.g. production)"
               required
               class="flex-1 bg-gray-900 border border-gray-600 rounded-lg px-4 py-2 text-white placeholder-gray-500 focus:outline-none focus:border-blue-500">
        <button type="submit"
                class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium text-sm transition-colors cursor-pointer">
            Generate Key
        </button>
    </form>
</div>

<div id="keys-content">
    {% include "keys_partial.html" %}
</div>
{% endblock %}