<!DOCTYPE html>
<html lang="<%= lang %>">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="#6366f1">
    <title><%= title %> | C³ CELERITY</title>
    <%- include('partials/favicon') %>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/css/style.min.css">
    <link rel="preload" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.19.0/dist/fonts/tabler-icons.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.19.0/dist/tabler-icons.min.css">
</head>
<body>
    <!-- Mobile Menu Overlay -->
    <div class="mobile-overlay" id="mobileOverlay" onclick="toggleMobileMenu()"></div>
    
    <div class="app">
        <!-- Mobile Header -->
        <div class="mobile-header">
            <button class="mobile-menu-btn" onclick="toggleMobileMenu()" aria-label="Menu">
                <span></span>
                <span></span>
                <span></span>
            </button>
            <div class="mobile-logo">
                <span class="logo-icon">⚡</span>
                <span class="logo-text">C³ CELERITY</span>
            </div>
            <div class="mobile-status">
                <span class="status-dot online"></span>
            </div>
        </div>
        
        <nav class="sidebar" id="sidebar">
            <div class="logo">
                <span class="logo-icon">⚡</span>
                <div class="logo-content">
                    <span class="logo-text">C³ CELERITY</span>
                    <a href="https://t.me/First_VPN_Click_bot" target="_blank" class="logo-sub">by Click Connect</a>
                </div>
            </div>
            <ul class="nav-menu">
                <li><a href="/panel" class="<%= page === 'dashboard' ? 'active' : '' %>">
                    <span class="nav-icon"><i class="ti ti-layout-dashboard"></i></span>
                    <span><%= t('nav.dashboard') %></span>
                </a></li>
                <li><a href="/panel/stats" class="<%= page === 'stats' ? 'active' : '' %>">
                    <span class="nav-icon"><i class="ti ti-trending-up"></i></span>
                    <span><%= t('nav.stats') %></span>
                </a></li>
                <li><a href="/panel/nodes" class="<%= page === 'nodes' ? 'active' : '' %>">
                    <span class="nav-icon"><i class="ti ti-server"></i></span>
                    <span><%= t('nav.nodes') %></span>
                </a></li>
                <li><a href="/panel/groups" class="<%= page === 'groups' ? 'active' : '' %>">
                    <span class="nav-icon"><i class="ti ti-folder"></i></span>
                    <span><%= t('nav.groups') %></span>
                </a></li>
                <li><a href="/panel/users" class="<%= page === 'users' ? 'active' : '' %>">
                    <span class="nav-icon"><i class="ti ti-users"></i></span>
                    <span><%= t('nav.users') %></span>
                </a></li>
                <li><a href="/panel/settings" class="<%= page === 'settings' ? 'active' : '' %>">
                    <span class="nav-icon"><i class="ti ti-settings"></i></span>
                    <span><%= t('nav.settings') %></span>
                </a></li>
            </ul>
            <div class="sidebar-footer">
                <!-- Language Switcher -->
                <div class="lang-switcher">
                    <a href="?lang=ru" class="lang-btn <%= lang === 'ru' ? 'active' : '' %>">RU</a>
                    <a href="?lang=en" class="lang-btn <%= lang === 'en' ? 'active' : '' %>">EN</a>
                </div>
                <a href="https://github.com/ClickDevTech/CELERITY-panel" target="_blank" class="github-link" title="GitHub">
                    <svg height="18" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
                    <span>GitHub</span>
                </a>
                <a href="/panel/logout" class="logout-btn"><%= t('nav.logout') %></a>
                <% if (typeof appVersion !== 'undefined' && appVersion) { %>
                <a href="https://github.com/ClickDevTech/CELERITY-panel/releases" target="_blank" rel="noopener" class="sidebar-version">v<%= appVersion %></a>
                <% } %>
            </div>
        </nav>
        <main class="content">
            <header class="topbar">
                <h1><%= title %></h1>
                <div class="topbar-right">
                    <span class="status-dot online"></span>
                    <span class="status-text"><%= t('common.online') %></span>
                </div>
            </header>
            <div class="main-content">
                <%- content %>
            </div>
        </main>
    </div>
    
    <script defer src="/js/app.js"></script>
    <script>
    function toggleMobileMenu() {
        const sidebar = document.getElementById('sidebar');
        const overlay = document.getElementById('mobileOverlay');
        sidebar.classList.toggle('active');
        overlay.classList.toggle('active');
    }

    document.addEventListener('DOMContentLoaded', () => {
        document.querySelectorAll('.nav-menu a').forEach(link => {
            link.addEventListener('click', () => {
                if (window.innerWidth <= 768) {
                    toggleMobileMenu();
                }
            });
        });
    });
    </script>
</body>
</html>
