{% extends "base.html" %}

{% block title %}API Keys - LinkSync{% endblock %}

{% block content %}
<div class="page-header">
    <h1>API Keys</h1>
    <button class="btn btn-primary" id="new-key-btn">+ New API Key</button>
</div>

<div id="api-keys-list" class="api-keys-table">
    <div class="loading">Loading API keys...</div>
</div>

<div id="key-modal" class="modal" style="display: none;">
    <div class="modal-overlay"></div>
    <div class="modal-content">
        <div class="modal-header">
            <h2>Create API Key</h2>
            <button class="modal-close" id="key-modal-close">&times;</button>
        </div>
        <form id="key-form">
            <div class="form-group">
                <label for="key-name">Key Name *</label>
                <input type="text" id="key-name" placeholder="e.g., Firefox Extension" required>
            </div>
            <div class="form-actions">
                <button type="button" class="btn btn-secondary" id="key-cancel-btn">Cancel</button>
                <button type="submit" class="btn btn-primary" id="key-save-btn">Create</button>
            </div>
        </form>
    </div>
</div>

<div id="key-result-modal" class="modal" style="display: none;">
    <div class="modal-overlay"></div>
    <div class="modal-content">
        <div class="modal-header">
            <h2>API Key Created</h2>
            <button class="modal-close" id="key-result-close">&times;</button>
        </div>
        <div class="key-result">
            <p><strong>Copy this key now. You will not be able to see it again.</strong></p>
            <div class="key-display">
                <code id="new-key-value"></code>
                <button class="btn btn-sm" id="copy-key-btn">Copy</button>
            </div>
        </div>
        <div class="form-actions">
            <button class="btn btn-primary" id="key-done-btn">Done</button>
        </div>
    </div>
</div>

<div id="delete-key-modal" class="modal" style="display: none;">
    <div class="modal-overlay"></div>
    <div class="modal-content modal-sm">
        <h2>Delete API Key</h2>
        <p>Are you sure you want to delete this API key? Any connections using this key will stop working.</p>
        <div class="form-actions">
            <button class="btn btn-secondary" id="delete-key-cancel-btn">Cancel</button>
            <button class="btn btn-danger" id="confirm-delete-key-btn">Delete</button>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="/static/js/apikeys-page.js"></script>
{% endblock %}