{% load static %}
{% load compress %}
{% load i18n %}
{% load blog_tags %}

<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE }}">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    {% block header %}
        <title>{% block title %}{{ SITE_NAME }}{% endblock %} - {{ SITE_DESCRIPTION }}</title>
        <meta name="description" content="{{ SITE_SEO_DESCRIPTION }}">
        <meta name="keywords" content="{{ SITE_KEYWORDS }}">
    {% endblock %}

    {% head_meta %}

    <!-- 字体与图标 -->
    <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=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">

    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>

    {% compress css %}
        <!-- 核心主题样式，替换掉旧的style.css -->
        <link rel='stylesheet' href='{% static 'blog/css/theme.css' %}' type='text/css' media='all'/>

        <!-- 其他必要的CSS，例如代码高亮 -->
        <link rel="stylesheet" href="{% static 'pygments/default.css' %}"/>
        <link rel="stylesheet" href="{% static 'blog/css/nprogress.css' %}">

        {% block compress_css %}{% endblock %}
    {% endcompress %}

    {% if GLOBAL_HEADER %}{{ GLOBAL_HEADER|safe }}{% endif %}
</head>

<body>
<div id="page" class="site">
    <!-- 现代化的吸顶导航栏 -->
    <header id="masthead" class="site-header" role="banner">
        <nav id="site-navigation" class="main-navigation" role="navigation">
            <!-- 网站Logo/名称 -->
            <div class="nav-logo">
                <a href="/" title="{{ SITE_NAME }}" rel="home">{{ SITE_NAME }}</a>
            </div>

            <!-- 导航菜单 -->
            {% include 'share_layout/nav.html' %}
            <!-- 夜间模式切换按钮 -->
            <button id="theme-toggle" style="position: fixed; top: 20px; right: 20px; z-index: 9999; background: transparent; border: none; cursor: pointer; font-size: 24px; padding: 5px; border-radius: 50%; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; transition: background 0.3s;">
                🌞
            </button>
            <script>
                // 夜间模式逻辑
                (function() {
                    const toggleBtn = document.getElementById('theme-toggle');
                    const root = document.documentElement;

                    // 检查本地存储
                    const savedTheme = localStorage.getItem('theme');
                    if (savedTheme === 'dark') {
                        root.setAttribute('data-theme', 'dark');
                        toggleBtn.innerHTML = '🌙'; // 月亮图标
                    }

                    toggleBtn.addEventListener('click', () => {
                        const currentTheme = root.getAttribute('data-theme');
                        if (currentTheme === 'dark') {
                            root.removeAttribute('data-theme');
                            localStorage.setItem('theme', 'light');
                            toggleBtn.innerHTML = '🌞'; // 太阳图标
                        } else {
                            root.setAttribute('data-theme', 'dark');
                            localStorage.setItem('theme', 'dark');
                            toggleBtn.innerHTML = '🌙';
                        }
                    });

                    // 鼠标悬停效果
                    toggleBtn.addEventListener('mouseenter', () => toggleBtn.style.backgroundColor = 'rgba(0,0,0,0.1)');
                    toggleBtn.addEventListener('mouseleave', () => toggleBtn.style.backgroundColor = 'transparent');
                })();
            </script>
        </nav>
    </header>

    <!-- 主体内容区 -->
    <div id="main" class="wrapper">
        {% block content %}{% endblock %}
        {% block sidebar %}{% endblock %}
    </div>

    <!-- 页脚 -->
    {% include 'share_layout/footer.html' %}
</div>

<!-- JavaScript 文件 -->
{% compress js %}
    <script type="text/javascript" src="{% static 'blog/js/jquery-3.6.0.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'blog/js/nprogress.js' %}"></script>
    <script>
        // 简单的JS交互，例如进度条
        $(document).ready(function(){
            NProgress.start();
        });
        $(window).on('load', function(){
            NProgress.done();
        });
    </script>
    {% block compress_js %}{% endblock %}
{% endcompress %}

{% block footer %}{% endblock %}

{% include 'plugins/ai_chat_widget.html' %}

</body>
</html>