{% extends "base.html" %}

{% block content %}
<div class="container mt-4">
    <h2>{{ _('API Keys Management') }}</h2>
    
    <div class="card mb-4">
        <div class="card-header">{{ _('Create New API Key') }}</div>
        <div class="card-body">
            <form action="{{ url_for('admin.add_api_key') }}" method="POST" class="form-inline">
                <input type="text" name="name" class="form-control mb-2 mr-sm-2" placeholder="{{ _('Key Name') }}" required>
                <button type="submit" class="btn btn-primary mb-2">{{ _('Generate Key') }}</button>
            </form>
        </div>
    </div>

    <table class="table table-bordered">
        <thead>
            <tr>
                <th>{{ _('ID') }}</th>
                <th>{{ _('API Key Name') }}</th>
                <th>{{ _('API Key') }}</th>
                <th>{{ _('Created At') }}</th>
                <th>{{ _('Action') }}</th>
            </tr>
        </thead>
        <tbody>
            {% for key in keys %}
            <tr>
                <td>{{ key.id }}</td>
                <td>{{ key.name }}</td>
                <td><code>{{ key.key }}</code></td>
                <td>{{ key.created_at.strftime('%Y-%m-%d %H:%M:%S') }}</td>
                <td>
                    <form action="{{ url_for('admin.delete_api_key', key_id=key.id) }}" method="POST" style="display:inline;" onsubmit="event.preventDefault(); window.customConfirm('{{ _('Are you sure you want to delete this API Key?') }}', () => { this.submit(); });">
                        <button type="submit" class="btn btn-danger btn-sm">{{ _('Delete') }}</button>
                    </form>
                </td>
            </tr>
            {% else %}
            <tr>
                <td colspan="5" class="text-center">{{ _('No API keys found.') }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}