{% extends "base.html" %}
{% load static %}
{% block title %}Account Security - {{ project_name }}{% endblock %}
{% block extra_head %}
    <script src="{% static 'js/password_validation.js' %}"></script>
    <style>
    .is-sr-only {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
    </style>
{% endblock %}
{% block content %}
{% include "components/hero_banner.html" with title="Account Security" subtitle="Manage your API keys and two-factor authentication" color="primary" %}

<section class="section">
    <div class="container">
        <div class="columns">
            <div class="column is-12">
                <h2 class="title is-4">Your API Keys</h2>
                {% include "users/partials/api_keys_partial.html" %}
            </div>
        </div>
        <div class="columns">
            <div class="column is-12">
                <div class="box">
                    <h3 class="title is-5">
                        <span class="icon">
                            <i class="fas fa-info-circle"></i>
                        </span>
                        <span>API Key Information</span>
                    </h3>
                    <div class="content">
                        <p><strong>Security Notice:</strong> API keys are only shown once upon generation. Store them securely and never share them publicly.</p>
                        <p><strong>Usage:</strong> Include your API key in the Authorization header:</p>
                        <pre class="has-background-light p-3"><code>Authorization: Bearer YOUR_API_KEY</code></pre>
                        <p><strong>Actions:</strong></p>
                        <ul>
                            <li><strong>Regenerate:</strong> Creates a new key and deactivates the old one</li>
                            <li><strong>Revoke:</strong> Permanently deactivates the key</li>
                        </ul>
                        <p>
                            <a href="{% url 'api:api_docs' %}" class="button is-link is-small">
                                <span class="icon">
                                    <i class="fas fa-book"></i>
                                </span>
                                <span>View API Documentation</span>
                            </a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="columns">
            <div class="column is-12">
                <div class="box">
                    <h3 class="title is-5">
                        <span class="icon">
                            <i class="fas fa-shield-alt"></i>
                        </span>
                        <span>Best Practices</span>
                    </h3>
                    <div class="content">
                        <ul>
                            <li>Use different API keys for different environments</li>
                            <li>Rotate your keys regularly</li>
                            <li>Revoke unused or compromised keys immediately</li>
                            <li>Monitor your API key usage regularly</li>
                            <li>Never commit API keys to version control</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- 2FA Section (if enabled) -->
        {% if two_factor_enabled %}
        <div class="columns">
            <div class="column is-12">
                <div class="box">
                    <h3 class="title is-5">Two-Factor Authentication</h3>
                    {% include "users/two_factor_settings.html" %}
                </div>
            </div>
        </div>
        {% endif %}
    </div>
</section>
{% endblock %}

{% block extra_js %}
<script>
// Alpine.js global store for API key management
document.addEventListener('alpine:init', () => {
    Alpine.store('apiKeys', {
        formVisible: false,
        
        closeForm() {
            // Find the form container with Alpine.js data
            const formContainer = document.querySelector('[x-data*="showForm"]');
            if (formContainer && formContainer._x_dataStack) {
                const alpineData = formContainer._x_dataStack[0];
                if (alpineData) {
                    alpineData.showForm = false;
                    // Reset form
                    const form = formContainer.querySelector('form');
                    if (form) form.reset();
                }
            }
        }
    });
});

// HTMX event handling with Alpine.js
document.body.addEventListener('htmx:afterSettle', function(event) {
    if (event.target && event.target.id === 'api-keys-container') {
        // Close the form after successful submission
        Alpine.store('apiKeys').closeForm();
    }
});
</script>
{% endblock %}