<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5">
    <title>{% block title %}服务管理{% endblock %} - 运行维护平台</title>
    <style>
        :root {
            --primary: #2563eb;
            --primary-hover: #1d4ed8;
            --primary-light: #dbeafe;
            --green: #16a34a;
            --green-light: #dcfce7;
            --yellow: #d97706;
            --yellow-light: #fef3c7;
            --red: #dc2626;
            --red-light: #fee2e2;
            --gray-50: #f9fafb;
            --gray-100: #f3f4f6;
            --gray-200: #e5e7eb;
            --gray-300: #d1d5db;
            --gray-400: #9ca3af;
            --gray-500: #6b7280;
            --gray-600: #4b5563;
            --gray-700: #374151;
            --gray-800: #1f2937;
            --gray-900: #111827;
        }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Microsoft YaHei", sans-serif;
            background: #f3f4f6;
            min-height: 100vh;
        }

        /* ===== 侧边栏 ===== */
        .sidebar {
            position: fixed;
            left: 0;
            top: 0;
            width: 200px;
            height: 100vh;
            background: linear-gradient(180deg, #1e293b 0%, #334155 100%);
            z-index: 100;
            transition: transform 0.3s ease;
        }
        .sidebar-brand {
            color: #fff;
            font-size: 18px;
            font-weight: 700;
            padding: 20px;
            border-bottom: 1px solid rgba(255,255,255,0.1);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .sidebar-nav {
            padding: 16px 0;
        }
        .nav-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px 20px;
            color: #94a3b8;
            text-decoration: none;
            font-size: 14px;
            transition: all 0.2s;
        }
        .nav-item:hover {
            background: rgba(255,255,255,0.05);
            color: #fff;
        }
        .nav-item.active {
            background: var(--primary);
            color: #fff;
        }
        .nav-icon {
            font-size: 16px;
            width: 20px;
            text-align: center;
        }

        /* ===== 顶部条 ===== */
        .topbar {
            position: fixed;
            left: 200px;
            top: 0;
            right: 0;
            height: 56px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 24px;
            z-index: 99;
        }
        .topbar-left {
            display: flex;
            align-items: center;
            gap: 16px;
        }
        .hamburger {
            display: none;
            background: rgba(255,255,255,0.2);
            border: 1px solid rgba(255,255,255,0.35);
            color: #fff;
            font-size: 18px;
            padding: 8px 12px;
            border-radius: 6px;
            cursor: pointer;
        }
        .topbar-home {
            background: rgba(255,255,255,0.2);
            color: #fff;
            border: 1px solid rgba(255,255,255,0.35);
            padding: 6px 14px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 600;
            text-decoration: none;
        }
        .topbar-home:hover {
            background: rgba(255,255,255,0.3);
        }
        .topbar-breadcrumb {
            color: rgba(255,255,255,0.7);
            font-size: 14px;
        }
        .topbar-breadcrumb a {
            color: rgba(255,255,255,0.7);
            text-decoration: none;
        }
        .topbar-breadcrumb a:hover {
            color: #fff;
        }
        .topbar-breadcrumb .current {
            color: #fff;
        }
        .topbar-user {
            color: #fff;
            display: flex;
            align-items: center;
            gap: 14px;
            font-size: 14px;
        }
        .btn-logout {
            background: rgba(255,255,255,0.15);
            color: #fff;
            border: 1px solid rgba(255,255,255,0.3);
            padding: 8px 16px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
        }
        .btn-logout:hover {
            background: rgba(255,255,255,0.25);
        }

        /* ===== 主内容区 ===== */
        .main-content {
            margin-left: 200px;
            padding: 84px 24px 28px;
            min-height: 100vh;
        }

        /* ===== 通用组件 ===== */
        .section-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px;
        }
        .section-title {
            font-size: 18px;
            font-weight: 700;
            color: var(--gray-900);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .footer {
            text-align: center;
            padding: 20px;
            color: var(--gray-500);
            font-size: 12px;
        }

        /* ===== Toast 通知 ===== */
        #toast-container {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 9999;
            display: flex;
            flex-direction: column;
            gap: 10px;
            max-width: 360px;
        }
        .toast {
            background: #fff;
            border-radius: 8px;
            padding: 12px 16px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            border-left: 4px solid var(--primary);
            font-size: 14px;
            color: var(--gray-900);
            opacity: 0;
            transform: translateX(20px);
            transition: opacity 0.3s, transform 0.3s;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .toast.show { opacity: 1; transform: translateX(0); }
        .toast.toast-success { border-left-color: var(--green); }
        .toast.toast-error { border-left-color: var(--red); }
        .toast.toast-warning { border-left-color: var(--yellow); }

        /* ===== 移动端响应式 ===== */
        @media screen and (max-width: 768px) {
            .sidebar {
                transform: translateX(-200px);
            }
            .sidebar.open {
                transform: translateX(0);
            }
            .topbar {
                left: 0;
            }
            .main-content {
                margin-left: 0;
                padding: 84px 14px 28px;
            }
            .hamburger {
                display: block;
            }
            .topbar-home {
                display: none;
            }
        }
    </style>
    {% block extra_css %}{% endblock %}
</head>
<body>
    <!-- 侧边栏 -->
    <aside class="sidebar" id="sidebar">
        <div class="sidebar-brand">🛠️ 服务管理</div>
        <nav class="sidebar-nav">
            <a href="/service-manage/authorization" class="nav-item {{ 'active' if active_menu == 'authorization' }}">
                <span class="nav-icon">🔑</span>
                <span>服务授权</span>
            </a>
            <a href="/service-manage/upgrade" class="nav-item {{ 'active' if active_menu == 'upgrade' }}">
                <span class="nav-icon">⬆️</span>
                <span>服务升级</span>
            </a>
            <a href="/service-manage/info" class="nav-item {{ 'active' if active_menu == 'info' }}">
                <span class="nav-icon">ℹ️</span>
                <span>服务信息</span>
            </a>
        </nav>
    </aside>

    <!-- 顶部条 -->
    <header class="topbar">
        <div class="topbar-left">
            <button class="hamburger" id="hamburger" onclick="toggleSidebar()">☰</button>
            <a href="/" class="topbar-home">🏠 返回首页</a>
            <span class="topbar-breadcrumb">
                <a href="/service-manage">服务管理</a>
                <span> / </span>
                <span class="current">{% block breadcrumb %}{% endblock %}</span>
            </span>
        </div>
        <div class="topbar-user">
            <span>{{ user.username }}（管理员）</span>
            <button class="btn-logout" onclick="handleLogout()">🚪 退出</button>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="main-content">
        {% block content %}{% endblock %}
    </main>

    <!-- Toast 容器 -->
    <div id="toast-container"></div>

    <div class="footer">运行维护平台 · 服务管理模块</div>

    <script>
        function toggleSidebar() {
            document.getElementById('sidebar').classList.toggle('open');
        }

        // 点击遮罩关闭侧边栏
        document.addEventListener('click', function(e) {
            const sidebar = document.getElementById('sidebar');
            const hamburger = document.getElementById('hamburger');
            if (sidebar.classList.contains('open') &&
                !sidebar.contains(e.target) &&
                !hamburger.contains(e.target)) {
                sidebar.classList.remove('open');
            }
        });

        async function handleLogout() {
            try {
                await fetch('/logout', {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    credentials: 'include'
                });
            } catch (e) {}
            window.location.href = '/login';
        }

        // Toast 通知
        function showToast(message, type) {
            type = type || 'success';
            var container = document.getElementById('toast-container');
            var toast = document.createElement('div');
            toast.className = 'toast toast-' + type;
            var icons = {success: '✅', error: '❌', warning: '⚠️'};
            toast.innerHTML = (icons[type] || 'ℹ️') + ' ' + message;
            container.appendChild(toast);
            requestAnimationFrame(function() {
                toast.classList.add('show');
            });
            setTimeout(function() {
                toast.classList.remove('show');
                setTimeout(function() { toast.remove(); }, 300);
            }, 3000);
        }
    </script>
    {% block extra_js %}{% endblock %}
</body>
</html>
