{% extends "base.html" %}

{% block title %}Admin Panel - Dewy Oracle{% endblock %}

{% block content %}
<header>
    <h1>Admin Panel</h1>
    <p class="subtitle">Manage users and application settings</p>
</header>

<div id="message" class="message hidden"></div>

<!-- Settings Section -->
<section class="section">
    <h2>Application Settings</h2>
    <div class="settings-grid">
        <div class="setting-item">
            <label for="allow-registration">
                <input type="checkbox" id="allow-registration" onchange="toggleRegistration(this)">
                Allow user registration from login page
            </label>
        </div>
    </div>
</section>

<!-- User Management Section -->
<section class="section">
    <h2>User Management</h2>
    <div class="section-actions">
        <button onclick="loadUsers()" class="btn btn-secondary">Refresh Users</button>
    </div>
    <div id="users-loading" class="loading">Loading users...</div>
    <div id="users-container" class="hidden">
        <table class="users-table">
            <thead>
                <tr>
                    <th>Username</th>
                    <th>Email</th>
                    <th>Display Name</th>
                    <th>Admin</th>
                    <th>Active</th>
                    <th>Created</th>
                    <th>Last Login</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody id="users-list">
            </tbody>
        </table>
    </div>
</section>
{% endblock %}

{% block extra_scripts %}
<script src="/static/js/admin.js"></script>
<script>
    // Initialize admin panel on page load
    document.addEventListener('DOMContentLoaded', () => {
        loadSettings();
        loadUsers();
    });
</script>
{% endblock %}