<!doctype html>
<html lang="en" data-bs-theme="dark">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{% block title %}Qpanel{% endblock %}</title>
    
    <!-- Fonts -->
    <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">

    <!-- Styles -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="{{ url_for('static', path='/css/custom.css') }}">
    
    <!-- Core Scripts -->
    <script src="https://unpkg.com/htmx.org@1.9.12"></script>
    <script src="https://unpkg.com/htmx.org/dist/ext/sse.js"></script> <!-- 新增: HTMX SSE 扩展 -->

    {% block head_scripts %}{% endblock %}
</head>
<body class="bg-dark-eops">

    <header class="navbar navbar-dark sticky-top flex-md-nowrap p-0 shadow-sm">
        <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6 fw-semibold" href="/">
             <i class="bi bi-robot me-2"></i> Qpanel
        </a>
    </header>

    <div class="container-fluid">
        <div class="row">
            <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-sidebar sidebar collapse sticky-top">
                <div class="position-sticky pt-3">
                    <ul class="nav flex-column">
                        <li class="nav-item"><a class="nav-link fs-sm {% if request.url.path == '/' %}active{% endif %}" href="/"><i class="bi bi-house-door me-2"></i> Home</a></li>
                        <li class="nav-item"><a class="nav-link fs-sm {% if request.url.path.startswith('/projects') %}active{% endif %}" href="/projects"><i class="bi bi-boxes me-2"></i> Strategy Projects</a></li>
                        <li class="nav-item"><a class="nav-link fs-sm {% if request.url.path == '/developer' %}active{% endif %}" href="/developer"><i class="bi bi-code-slash me-2"></i> Developer IDE</a></li>
                        <li class="nav-item"><a class="nav-link fs-sm {% if request.url.path == '/strategy-market' %}active{% endif %}" href="/strategy-market"><i class="bi bi-shop me-2"></i> Strategy Market</a></li>
                        <li class="nav-item"><a class="nav-link fs-sm {% if request.url.path == '/data-center' %}active{% endif %}" href="/data-center"><i class="bi bi-database me-2"></i> Data Center</a></li>
                        <!-- 新增 -->
                        <li class="nav-item"><a class="nav-link fs-sm {% if request.url.path == '/docker-center' %}active{% endif %}" href="/docker-center"><i class="bi bi-box-seam me-2"></i> Docker Center</a></li>
                        
                        <hr class="my-2" style="border-color: rgba(255,255,255,0.1);">

                        <li class="nav-item"><a class="nav-link fs-sm {% if request.url.path == '/trading-settings' %}active{% endif %}" href="/trading-settings"><i class="bi bi-key me-2"></i> Trading Settings</a></li>
                        <!-- 新增 -->
                        <li class="nav-item"><a class="nav-link fs-sm {% if request.url.path == '/api-management' %}active{% endif %}" href="/api-management"><i class="bi bi-cloud-arrow-up me-2"></i> API Management</a></li>
                        <li class="nav-item"><a class="nav-link fs-sm {% if request.url.path == '/panel-settings' %}active{% endif %}" href="/panel-settings"><i class="bi bi-gear me-2"></i> Panel Settings</a></li>
                    </ul>
                </div>
            </nav>

            <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
                <div class="pt-3 pb-2 mb-3">
                    {% block content %}{% endblock %}
                </div>
            </main>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    {% block body_scripts %}{% endblock %}
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
</body>
</html>