{% extends "admin_base.html" %}

{% block title %}Adapt Admin{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="/static/admin/style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
{% endblock %}

{% block content %}
<div class="app-container">
<aside class="sidebar">
    <div class="brand">
        <h1>Adapt</h1>
        <span class="badge">Admin</span>
    </div>
    <nav>
        <button class="nav-item active" data-tab="users">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                <circle cx="12" cy="7" r="4"></circle>
            </svg>
            Users
        </button>
        <button class="nav-item" data-tab="locks">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
                <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
            </svg>
            Locks
        </button>
        <button class="nav-item" data-tab="groups">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                <circle cx="9" cy="7" r="4"></circle>
                <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
            </svg>
            Groups
        </button>
        <button class="nav-item" data-tab="permissions">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
            </svg>
            Permissions
        </button>
        <button class="nav-item" data-tab="api-keys">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path
                    d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4">
                </path>
            </svg>
            API Keys
        </button>
        <button class="nav-item" data-tab="audit-logs">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                <polyline points="14 2 14 8 20 8"></polyline>
                <line x1="16" y1="13" x2="8" y2="13"></line>
                <line x1="16" y1="17" x2="8" y2="17"></line>
                <polyline points="10 9 9 9 8 9"></polyline>
            </svg>
            Audit Log
        </button>
        <button class="nav-item" data-tab="cache">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M3 7v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2z"></path>
                <path d="M8 5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2H8V5z"></path>
            </svg>
            Cache
        </button>

    </nav>
    <div class="user-profile">
        <div class="user-info">
            <span id="current-username">Loading...</span>
        </div>
        <button id="logout-btn" class="icon-btn">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
                <polyline points="16 17 21 12 16 7"></polyline>
                <line x1="21" y1="12" x2="9" y2="12"></line>
            </svg>
        </button>
    </div>
</aside>

<main class="content">
    <div id="users-view" class="view active">
        <header class="view-header">
            <h2>User Management</h2>
            <button class="btn primary" id="add-user-btn">Add User</button>
        </header>
        <div class="card">
            <table id="users-table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Username</th>
                        <th>Role</th>
                        <th>Active</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Populated by JS -->
                </tbody>
            </table>
        </div>
    </div>

    <div id="locks-view" class="view">
        <header class="view-header">
            <h2>System Locks</h2>
            <button class="btn secondary" id="clean-locks-btn">Clean Stale Locks</button>
        </header>
        <div class="card">
            <table id="locks-table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Resource</th>
                        <th>Owner</th>
                        <th>Reason</th>
                        <th>Expires</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Populated by JS -->
                </tbody>
            </table>
        </div>
    </div>

    <div id="groups-view" class="view">
        <header class="view-header">
            <h2>Group Management</h2>
            <button class="btn primary" id="add-group-btn">Add Group</button>
        </header>
        <div class="card">
            <table id="groups-table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Description</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Populated by JS -->
                </tbody>
            </table>
        </div>
    </div>

    <div id="permissions-view" class="view">
        <header class="view-header">
            <h2>Permission Definitions</h2>
            <button class="btn primary" id="add-permission-btn">Add Permission</button>
        </header>
        <div class="card">
            <table id="permissions-table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Resource</th>
                        <th>Action</th>
                        <th>Description</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Populated by JS -->
                </tbody>
            </table>
        </div>
    </div>

    <div id="api-keys-view" class="view">
        <header class="view-header">
            <h2>API Keys</h2>
            <button class="btn primary" id="add-api-key-btn">Generate Key</button>
        </header>
        <div class="card">
            <table id="api-keys-table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>User ID</th>
                        <th>Description</th>
                        <th>Expires</th>
                        <th>Last Used</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Populated by JS -->
                </tbody>
            </table>
        </div>
    </div>

    <div id="audit-logs-view" class="view">
        <header class="view-header">
            <h2>Audit Log</h2>
            <div style="display: flex; gap: 0.5rem; align-items: center;">
                <input type="number" id="filter-user-id" placeholder="User ID" style="padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
                <input type="text" id="filter-action" placeholder="Action" style="padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
                <input type="text" id="filter-resource" placeholder="Resource" style="padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
                <button class="btn secondary" id="refresh-audit-btn">Refresh</button>
            </div>
        </header>
        <div class="card">
            <table id="audit-logs-table">
                <thead>
                    <tr>
                        <th>Time</th>
                        <th>User ID</th>
                        <th>Action</th>
                        <th>Resource</th>
                        <th>Details</th>
                        <th>IP</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Populated by JS -->
                </tbody>
            </table>
        </div>
    </div>

    <div id="cache-view" class="view">
        <header class="view-header">
            <h2>Cache Management</h2>
            <button class="btn secondary" id="clear-cache-btn">Clear All Cache</button>
        </header>
        <div class="card">
            <table id="cache-table">
                <thead>
                    <tr>
                        <th>Key</th>
                        <th>Resource</th>
                        <th>User</th>
                        <th>Expires At</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Populated by JS -->
                </tbody>
            </table>
        </div>
    </div>

</main>

<!-- Modal for Add User -->
<div id="user-modal" class="modal">
    <div class="modal-content">
        <header>
            <h3>Add New User</h3>
            <button class="close-modal">&times;</button>
        </header>
        <form id="add-user-form">
            <div class="form-group">
                <label>Username</label>
                <input type="text" name="username" required>
            </div>
            <div class="form-group">
                <label>Password</label>
                <input type="password" name="password" required>
            </div>
            <div class="form-group checkbox">
                <input type="checkbox" id="is_superuser" name="is_superuser">
                <label for="is_superuser">Is Superuser?</label>
            </div>
            <footer>
                <button type="button" class="btn secondary close-modal">Cancel</button>
                <button type="submit" class="btn primary">Create User</button>
            </footer>
        </form>
    </div>
</div>

<!-- Modal for Add Group -->
<div id="group-modal" class="modal">
    <div class="modal-content">
        <header>
            <h3>Add New Group</h3>
            <button class="close-modal">&times;</button>
        </header>
        <form id="add-group-form">
            <div class="form-group">
                <label>Name</label>
                <input type="text" name="name" required>
            </div>
            <div class="form-group">
                <label>Description</label>
                <input type="text" name="description">
            </div>
            <footer>
                <button type="button" class="btn secondary close-modal">Cancel</button>
                <button type="submit" class="btn primary">Create Group</button>
            </footer>
        </form>
    </div>
</div>

<!-- Modal for Group Members -->
<div id="members-modal" class="modal">
    <div class="modal-content">
        <header>
            <h3>Manage Group Members</h3>
            <button class="close-modal">&times;</button>
        </header>
        <div class="form-group">
            <label>Add User to Group</label>
            <div style="display: flex; gap: 0.5rem;">
                <select id="add-member-select"
                    style="flex: 1; padding: 0.5rem; border: 1px solid var(--border); border-radius: 0.375rem;">
                    <!-- Populated by JS -->
                </select>
                <button id="add-member-btn" class="btn primary">Add</button>
            </div>
        </div>
        <div style="margin-top: 1.5rem;">
            <label
                style="display: block; margin-bottom: 0.5rem; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary);">Current
                Members</label>
            <ul id="members-list"
                style="list-style: none; padding: 0; border: 1px solid var(--border); border-radius: 0.375rem; max-height: 200px; overflow-y: auto;">
                <!-- Populated by JS -->
            </ul>
        </div>
    </div>
</div>

<!-- Modal for Add Permission -->
<div id="permission-modal" class="modal">
    <div class="modal-content">
        <header>
            <h3>Add New Permission</h3>
            <button class="close-modal">&times;</button>
        </header>
        <form id="add-permission-form">
            <div class="form-group">
                <label>Resource</label>
                <input type="text" name="resource" placeholder="e.g. 'documents'" required>
            </div>
            <div class="form-group">
                <label>Action</label>
                <input type="text" name="action" placeholder="e.g. 'read'" required>
            </div>
            <div class="form-group">
                <label>Description</label>
                <input type="text" name="description">
            </div>
            <footer>
                <button type="button" class="btn secondary close-modal">Cancel</button>
                <button type="submit" class="btn primary">Create Permission</button>
            </footer>
        </form>
    </div>
</div>

<!-- Modal for Group Permissions -->
<div id="group-permissions-modal" class="modal">
    <div class="modal-content">
        <header>
            <h3>Manage Group Permissions</h3>
            <button class="close-modal">&times;</button>
        </header>
        <div class="form-group">
            <label>Add Permission to Group</label>
            <div style="display: flex; gap: 0.5rem;">
                <select id="add-group-permission-select"
                    style="flex: 1; padding: 0.5rem; border: 1px solid var(--border); border-radius: 0.375rem;">
                    <!-- Populated by JS -->
                </select>
                <button id="add-group-permission-btn" class="btn primary">Add</button>
            </div>
        </div>
        <div style="margin-top: 1.5rem;">
            <label
                style="display: block; margin-bottom: 0.5rem; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary);">Current
                Permissions</label>
            <ul id="group-permissions-list"
                style="list-style: none; padding: 0; border: 1px solid var(--border); border-radius: 0.375rem; max-height: 200px; overflow-y: auto;">
                <!-- Populated by JS -->
            </ul>
        </div>
    </div>
</div>

<!-- Modal for Add API Key -->
<div id="api-key-modal" class="modal">
    <div class="modal-content">
        <header>
            <h3>Generate API Key</h3>
            <button class="close-modal">&times;</button>
        </header>
        <form id="add-api-key-form">
            <div class="form-group">
                <label>User</label>
                <select name="user_id" required
                    style="width: 100%; padding: 0.5rem; border: 1px solid var(--border); border-radius: 0.375rem;">
                    <!-- Populated by JS -->
                </select>
            </div>
            <div class="form-group">
                <label>Description</label>
                <input type="text" name="description" placeholder="e.g. 'CI/CD Pipeline'">
            </div>
            <div class="form-group">
                <label>Expires In (Days)</label>
                <input type="number" name="expires_in_days" placeholder="Leave empty for no expiration">
            </div>
            <footer>
                <button type="button" class="btn secondary close-modal">Cancel</button>
                <button type="submit" class="btn primary">Generate</button>
            </footer>
        </form>
    </div>
</div>

<!-- Modal for Showing New API Key -->
<div id="show-key-modal" class="modal">
    <div class="modal-content">
        <header>
            <h3>API Key Generated</h3>
            <button class="close-modal">&times;</button>
        </header>
        <div style="padding: 1rem;">
            <p>Please copy your API key now. You won't be able to see it again!</p>
            <div
                style="background: #f5f5f5; padding: 1rem; border-radius: 0.375rem; font-family: monospace; word-break: break-all; margin: 1rem 0;">
                <strong id="new-api-key-display"></strong>
            </div>
        </div>
        <footer>
            <button type="button" class="btn primary close-modal">Done</button>
        </footer>
    </div>
    </div>
</div>
{% endblock %}{% block extra_scripts %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="/static/admin/app.js"></script>
{% endblock %}