<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navitrends — Ops Platform</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=Geist+Mono:wght@300;400;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <div class="layout">

        <!-- ── SIDEBAR ── -->
        <aside class="sidebar">
            <div class="sidebar-brand">
                <div class="brand-mark">NV</div>
                <div>
                    <div class="brand-name">Navitrends</div>
                    <div class="brand-sub">OPS PLATFORM</div>
                </div>
            </div>

            <nav class="nav">
                <div class="nav-section-label">MONITOR</div>
                <a class="nav-item {% if active_page == 'dashboard' %}active{% endif %}" href="{{ url_for('dashboard') }}">
                    <i class="fas fa-gauge-high"></i><span>Dashboard</span>
                </a>
                <a class="nav-item {% if active_page == 'sites' %}active{% endif %}" href="{{ url_for('sites_page') }}">
                    <i class="fas fa-globe"></i><span>Application Sites</span>
                    <span class="nav-badge" id="nav-badge-sites">5</span>
                </a>
                <a class="nav-item {% if active_page == 'containers' %}active{% endif %}" href="{{ url_for('containers_page') }}">
                    <i class="fas fa-cubes"></i><span>All Containers</span>
                    <span class="nav-badge" id="nav-badge-containers">—</span>
                </a>

                <div class="nav-section-label" style="margin-top:20px;">OPERATIONS</div>
                <a class="nav-item {% if active_page == 'restore' %}active{% endif %}" href="{{ url_for('restore_page') }}">
                    <i class="fas fa-rotate-right"></i><span>Restore</span>
                </a>
                <a class="nav-item {% if active_page == 'backups' %}active{% endif %}" href="{{ url_for('backups_page') }}">
                    <i class="fas fa-database"></i><span>Backups</span>
                </a>
                <a class="nav-item {% if active_page == 'cloud' %}active{% endif %}" href="{{ url_for('cloud_page') }}">
                    <i class="fas fa-cloud"></i><span>Cloud Storage</span>
                </a>

                <div class="nav-section-label" style="margin-top:20px;">ADMIN</div>
                <a class="nav-item {% if active_page == 'users' %}active{% endif %}" href="{{ url_for('users_page') }}">
                    <i class="fas fa-users-gear"></i><span>Users</span>
                    <span class="nav-badge" id="nav-badge-users">—</span>
                </a>
                <a class="nav-item {% if active_page == 'settings' %}active{% endif %}" href="{{ url_for('settings_page') }}">
                    <i class="fas fa-sliders"></i><span>Settings</span>
                </a>
            </nav>

            <div class="sidebar-footer">
                <div class="server-pill" id="server-pill">
                    <span class="pulse-dot" id="pulse-dot"></span>
                    <span id="server-status-text">Checking…</span>
                </div>
                <!-- Theme toggle -->
                <button class="theme-toggle" id="theme-toggle" title="Toggle light/dark mode" onclick="toggleTheme()">
                    <i class="fas fa-moon" id="theme-icon"></i>
                </button>
                <a href="/logout" class="logout-btn" title="Logout"><i class="fas fa-right-from-bracket"></i></a>
            </div>
        </aside>

        <!-- ── MAIN ── -->
        <main class="main">
            <header class="topbar">
                <div class="topbar-left">
                    <h1 class="page-title" id="page-title">{{ page_title or 'Dashboard' }}</h1>
                    <span class="page-subtitle" id="page-subtitle">{{ page_subtitle or main_server }}</span>
                </div>
                <div class="topbar-right">
                    <button class="icon-btn" onclick="refreshAll()" title="Refresh">
                        <i class="fas fa-sync-alt" id="refresh-icon"></i>
                    </button>
                    <div class="uptime-chip" id="uptime-chip">—</div>
                </div>
            </header>

            <div class="content">
                {% block content %}{% endblock %}
            </div>
        </main>
    </div>

    <script src="{{ url_for('static', filename='js/platform.js') }}?v=navbadges2"></script>
    <script>
    // ── Theme persistence ───────────────────────────────────────
    (function() {
        const saved = localStorage.getItem('nv-theme') || 'dark';
        applyTheme(saved);
    })();

    function applyTheme(theme) {
        document.documentElement.setAttribute('data-theme', theme);
        const icon = document.getElementById('theme-icon');
        if (icon) icon.className = theme === 'dark' ? 'fas fa-moon' : 'fas fa-sun';
        localStorage.setItem('nv-theme', theme);
    }

    function toggleTheme() {
        const current = document.documentElement.getAttribute('data-theme') || 'dark';
        applyTheme(current === 'dark' ? 'light' : 'dark');
    }
    </script>
</body>
</html>
