{# 基础模板 #}
<!DOCTYPE html>
<html lang="zh-CN" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}智队中枢{% endblock %}</title>
    
    {# Tailwind CSS #}
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        primary: {
                            50: '#f0f9ff',
                            100: '#e0f2fe',
                            200: '#bae6fd',
                            300: '#7dd3fc',
                            400: '#38bdf8',
                            500: '#0ea5e9',
                            600: '#0284c7',
                            700: '#0369a1',
                            800: '#075985',
                            900: '#0c4a6e',
                        }
                    }
                }
            }
        }
    </script>
    
    {# 自定义样式 #}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    
    {# HTMX #}
    <script src="https://unpkg.com/htmx.org@1.9.10"></script>
    
    {% block extra_head %}{% endblock %}
</head>
<body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors duration-200">
    
    {# Token 检查 - 如果没有 token 就跳转到登录页面 #}
    <script>
        (function() {
            const token = localStorage.getItem('access_token');
            if (!token && !window.location.pathname.includes('/login')) {
                window.location.href = '/web/login';
            }
        })();
    </script>
    
    {# 导航栏 #}
    {% include 'components/navbar.html' %}
    
    <div class="flex h-[calc(100vh-64px)]">
        {# 侧边栏 #}
        {% include 'components/sidebar.html' %}
        
        {# 主内容区 #}
        <main class="flex-1 overflow-auto p-6">
            {% block content %}{% endblock %}
        </main>
    </div>
    
    {# Toast 提示 #}
    {% include 'components/toast.html' %}
    
    {# 主题切换脚本 #}
    <script>
        // 初始化主题
        const savedTheme = localStorage.getItem('theme') || 'light';
        document.documentElement.setAttribute('data-theme', savedTheme);
        
        // 主题切换函数
        function toggleTheme() {
            const html = document.documentElement;
            const current = html.getAttribute('data-theme');
            const next = current === 'light' ? 'dark' : 'light';
            
            html.setAttribute('data-theme', next);
            localStorage.setItem('theme', next);
        }
        
        // 页面加载后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 监听主题切换按钮
            document.getElementById('theme-toggle')?.addEventListener('click', toggleTheme);
        });
    </script>
    
    {% block scripts %}{% endblock %}
</body>
</html>
