<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Auth Framework Admin{% endblock %}</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
<style>
.sidebar {
height: 100vh;
position: sticky;
top: 0;
background: linear-gradient(180deg, #2c3e50 0%, #34495e 100%);
}
.nav-link {
color: rgba(255, 255, 255, 0.8) !important;
transition: all 0.3s ease;
}
.nav-link:hover,
.nav-link.active {
color: white !important;
background-color: rgba(255, 255, 255, 0.1) !important;
border-radius: 0.375rem;
}
.content-wrapper {
min-height: 100vh;
background-color: #f8f9fa;
}
.card {
border: none;
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
.status-badge {
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
}
.status-healthy {
background-color: #198754;
}
.status-warning {
background-color: #ffc107;
}
.status-critical {
background-color: #dc3545;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 col-lg-2 px-0">
<div class="sidebar d-flex flex-column p-3">
<h5 class="text-white mb-4">
<i class="bi bi-shield-check me-2"></i>
Auth Framework
</h5>
<nav class="nav nav-pills flex-column">
<a href="/admin" class="nav-link {% if page == 'dashboard' %}active{% endif %}">
<i class="bi bi-speedometer2 me-2"></i>
Dashboard
</a>
<a href="/admin/config" class="nav-link {% if page == 'config' %}active{% endif %}">
<i class="bi bi-gear me-2"></i>
Configuration
</a>
<a href="/admin/users" class="nav-link {% if page == 'users' %}active{% endif %}">
<i class="bi bi-people me-2"></i>
Users
</a>
<a href="/admin/security" class="nav-link {% if page == 'security' %}active{% endif %}">
<i class="bi bi-shield-lock me-2"></i>
Security
</a>
<a href="/admin/logs" class="nav-link {% if page == 'logs' %}active{% endif %}">
<i class="bi bi-journal-text me-2"></i>
Logs
</a>
</nav>
<div class="mt-auto">
<div class="text-white-50 small">
<div>Server: <span class="text-white">{{ server_status.running | yesno:"Running,Stopped" }}</span></div>
<div>Port: <span class="text-white">{{ server_status.port | default:"N/A" }}</span></div>
</div>
</div>
</div>
</div>
<div class="col-md-9 col-lg-10">
<div class="content-wrapper p-4">
{% block header %}{% endblock %}
<main>
{% block content %}{% endblock %}
</main>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
function setupAutoRefresh() {
const refreshInterval = 30000;
if (window.location.pathname.includes('dashboard') ||
window.location.pathname.includes('status')) {
setInterval(() => {
if (!document.hidden) {
window.location.reload();
}
}, refreshInterval);
}
}
document.addEventListener('DOMContentLoaded', setupAutoRefresh);
async function apiCall(endpoint, method = 'GET', data = null) {
const options = {
method,
headers: {
'Content-Type': 'application/json',
}
};
if (data) {
options.body = JSON.stringify(data);
}
try {
const response = await fetch(`/api${endpoint}`, options);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return await response.json();
} catch (error) {
console.error('API call failed:', error);
throw error;
}
}
</script>
{% block scripts %}{% endblock %}
</body>
</html>