{% extends "base.html" %}

{% block title %}API Keys - Whisper API Admin{% endblock %}

{% block content %}
<div class="container">
    <div class="header">
        <h1>🔐 API Key Management</h1>
        <div class="nav">
            <a href="/admin">Dashboard</a>
            <a href="/admin/keys" class="active">API Keys</a>
            <a href="/admin/models">Models</a>
            <a href="/admin/logout">Logout</a>
        </div>
    </div>
    
    {% if message %}
    <div class="alert alert-success">
        {{ message }}
    </div>
    {% endif %}
    
    {% if new_key %}
    <div class="card" style="background: #c6f6d5; border: 2px solid #48bb78;">
        <h2>✨ New API Key Generated</h2>
        <p>Copy this key now - it will not be shown again!</p>
        <div class="api-key-display">{{ new_key }}</div>
        <button onclick="copyToClipboard('{{ new_key }}')" class="btn">Copy to Clipboard</button>
    </div>
    {% endif %}
    
    <div class="card">
        <h2>Create New API Key</h2>
        <form method="POST" action="/admin/keys/create">
            <div class="form-group">
                <label for="description">Description (optional)</label>
                <input type="text" id="description" name="description" placeholder="e.g., Clawdbot Integration">
            </div>
            <button type="submit" class="btn btn-success">Generate New API Key</button>
        </form>
    </div>
    
    <div class="card">
        <h2>Active API Keys</h2>
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Description</th>
                    <th>Created</th>
                    <th>Last Used</th>
                    <th>Usage Count</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for key in keys %}
                <tr>
                    <td>{{ key.id }}</td>
                    <td>{{ key.description or '-' }}</td>
                    <td>{{ key.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
                    <td>
                        {% if key.last_used_at %}
                            {{ key.last_used_at.strftime('%Y-%m-%d %H:%M') }}
                        {% else %}
                            Never
                        {% endif %}
                    </td>
                    <td>{{ key.usage_count }}</td>
                    <td>
                        <span class="badge badge-{{ 'success' if key.is_active else 'danger' }}">
                            {{ 'Active' if key.is_active else 'Inactive' }}
                        </span>
                    </td>
                    <td>
                        <form method="POST" action="/admin/keys/{{ key.id }}/toggle" style="display: inline;">
                            <button type="submit" class="btn" style="padding: 5px 10px; font-size: 12px;">
                                {{ 'Deactivate' if key.is_active else 'Activate' }}
                            </button>
                        </form>
                        <form method="POST" action="/admin/keys/{{ key.id }}/delete" style="display: inline; margin-left: 5px;"
                              onsubmit="return confirm('Are you sure you want to delete this API key?');">
                            <button type="submit" class="btn btn-danger" style="padding: 5px 10px; font-size: 12px;">
                                Delete
                            </button>
                        </form>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        
        {% if not keys %}
        <p style="text-align: center; color: #666; margin-top: 20px;">
            No API keys found. Create one above.
        </p>
        {% endif %}
    </div>
</div>

<script>
function copyToClipboard(text) {
    navigator.clipboard.writeText(text).then(function() {
        alert('API Key copied to clipboard!');
    }, function(err) {
        console.error('Could not copy text: ', err);
    });
}
</script>
{% endblock %}