{% extends "base.html" %}

{% block title %}Create API Key - SEREACT Web Client{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="fas fa-key"></i> Create API Key
                </h5>
            </div>
            <div class="card-body">
                <form method="POST">
                    <div class="mb-3">
                        <label for="name" class="form-label">
                            <i class="fas fa-tag"></i> Key Name *
                        </label>
                        <input type="text" class="form-control" id="name" name="name" 
                               placeholder="Enter API key name" required>
                        <div class="form-text">
                            A descriptive name for this API key
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="description" class="form-label">
                            <i class="fas fa-align-left"></i> Description
                        </label>
                        <textarea class="form-control" id="description" name="description" 
                                  rows="3" placeholder="Enter description (optional)"></textarea>
                        <div class="form-text">
                            Optional description of the key's purpose or usage
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="team_id" class="form-label">
                            <i class="fas fa-users"></i> Team (Admin Only)
                        </label>
                        <select class="form-select" id="team_id" name="team_id">
                            <option value="">Use current user's team</option>
                            {% for team in teams %}
                            <option value="{{ team.id }}">{{ team.name }}</option>
                            {% endfor %}
                        </select>
                        <div class="form-text">
                            Leave empty to use your current team. Admin users can select any team.
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="user_id" class="form-label">
                            <i class="fas fa-user"></i> User (Admin Only)
                        </label>
                        <select class="form-select" id="user_id" name="user_id">
                            <option value="">Use current user</option>
                            {% for user in users %}
                            <option value="{{ user.id }}">{{ user.name }} ({{ user.email }})</option>
                            {% endfor %}
                        </select>
                        <div class="form-text">
                            Leave empty to create the key for yourself. Admin users can create keys for other users.
                        </div>
                    </div>

                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                        <a href="{{ url_for('api_keys') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></i> Back to API Keys
                        </a>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-key"></i> Create API Key
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <div class="card mt-4">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="fas fa-info-circle"></i> Important Information
                </h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <h6><i class="fas fa-shield-alt text-warning"></i> Security</h6>
                        <ul class="small">
                            <li>API keys provide full access to your account</li>
                            <li>The key value will only be shown once</li>
                            <li>Store the key securely and never share it</li>
                            <li>Revoke keys that are no longer needed</li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <h6><i class="fas fa-clock text-info"></i> Expiration</h6>
                        <ul class="small">
                            <li>API keys have automatic expiration dates</li>
                            <li>You'll need to create new keys when they expire</li>
                            <li>Monitor key usage and expiration dates</li>
                            <li>Inactive keys are automatically disabled</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}