{% extends "base.html" %}

{% block title %}Wiki{% endblock %}

{% block head %}
{{ super() }}
<link href="{{ url_for('static', filename='libs/swiper/swiper-bundle.min.css') }}" rel="stylesheet">
<script src="{{ url_for('static', filename='libs/swiper/swiper-bundle.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/wiki.js') }}"></script>


{% endblock %}

{% block content %}
<div class="wiki-container">
    <div class="wiki-header">
        <div class="header-content">
            <div class="header-main">
                <div class="title-and-toggle">
                    <!-- Wiki类型切换按钮 -->
                    <div class="wiki-type-toggle">
                        <div class="toggle-container">
                            <div class="toggle-btn active" data-type="news">
                                资讯
                            </div>
                            <div class="toggle-btn" data-type="version">
                                更新日志
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="search-container">
                <div class="search-wrapper">
                    <i class="fas fa-search search-icon"></i>
                    <input 
                        type="text" 
                        id="wiki-search-input" 
                        placeholder="搜索相关内容..."
                    >
                </div>
                <div class="search-shortcut">
                    <kbd>⌘K</kbd>
                </div>
            </div>

            <!-- 轮播图区域 -->
            <div class="wiki-carousel">
                <div class="swiper wiki-swiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="carousel-item" style="background-image: url('/static/images/carousel/banner1.png?v=20240101');">
                                <div class="carousel-content">
                                    <!-- <p>全新旗舰，引领科技新高度</p> -->
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="carousel-item" style="background-image: url('/static/images/carousel/banner2.png?v=20240101');">
                                <div class="carousel-content">
                                    
                                    <!-- <p>智能互联，打造极致体验</p> -->
                                </div>
                            </div>
                        </div>
                         <div class="swiper-slide">
                            <div class="carousel-item" style="background-image: url('/static/images/carousel/banner3.png');">
                                <div class="carousel-content">
                                    
                                    <!--<p>5G、AI、芯片技术全面领先</p>-->
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-pagination"></div>
                    <!-- <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div> -->
                </div>
            </div>

            <!-- <div class="version-filter" style="display: none;">
                <div class="filter-container">
                    <div class="filter-section first-level-filter">
                        <label>一级分类</label>
                        <select id="first-level-select">
                            <option value="">全部</option>
                        </select>
                    </div>
                    <div class="filter-section second-level-filter">
                        <label>二级分类</label>
                        <select id="second-level-select">
                            <option value="">全部</option>
                        </select>
                    </div>
                </div>
            </div> -->

            <div class="version-category-filter" style="display: none;">
                <div class="filter-container">
                    <div class="filter-wrapper">
                        <div class="filter-chip-group">
                            <div class="filter-chip" data-type="second-level">
                                <select id="second-level-filter" class="filter-chip-select">
                                    <option value="">设备类型</option>
                                </select>
                            </div>
                            <div class="filter-chip" data-type="third-level">
                                <select id="third-level-filter" class="filter-chip-select">
                                    <option value="">设备型号</option>
                                </select>
                            </div>
                        </div>
                        <button class="filter-reset-btn">
                            <i class="fas fa-undo"></i> 
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="wiki-content">
        <div class="wiki-entries grid-view">
            {% for entry in entries %}
            <article 
                     class="news-card {% if entry.wiki_type == 'version' %}version-card{% endif %}" 
                     onclick="window.location.href='{{ url_for('wiki.wiki_detail', entry_id=entry.id) }}';"
                     data-type="{{ entry.wiki_type }}"
                     data-id="{{ entry.id }}"
                     data-second-level="{{ entry.second_level }}"
                     data-third-level="{{ entry.third_level }}"
            >
                <div class="news-card-content">
                    <div class="news-card-text">
                        <h3 class="news-card-title">{{ entry.title }}</h3>
                        <div class="news-card-meta">
                            <span class="news-card-tag 
                                {% if entry.wiki_type == 'version' %}version-tag{% endif %}
                                {% if entry.second_level %}{{ entry.second_level|lower|replace(' ', '-') }}-tag{% endif %}
                            ">
                                {% if entry.wiki_type == 'version' %}
                                 <i class="fas fa-code-branch"></i> {{ entry.version }} - {{ entry.second_level }} - {{ entry.third_level }}
                                {% else %}
                                {{ entry.second_level }}
                                {% endif %}
                            </span>
                            <time class="news-card-date">{{ entry.created_at }}</time>
                        </div>
                    </div>
                </div>
            </article>
            {% endfor %}
        </div>
    </div>
</div>

{% include 'nav_bar.html' %}

<style>
.wiki-content {
    margin-top: 0 0 20px 0;
}

/* 标题和切换按钮容器 */
.title-and-toggle {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    padding: 0 15px;
    text-align: left;
}

@media (max-width: 768px) {
    .title-and-toggle {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        padding: 0 10px;
    }
}

/* Wiki 容器样式 */
.wiki-container {
    max-width: 1200px;;
    margin: 0 auto;;
}

.wiki-header {
    padding-top: 10px;
}

.header-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
    padding: 0 15px;

}

.header-main {
    margin-bottom: 1px;
    width: 100%;
    padding: 0 15px 15px 15px;
}

.wiki-title {
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 10px;
    text-align: left;
}

.wiki-subtitle {
    color: #666;
    font-size: 1rem;
    text-align: left;
}

/* Wiki 类型切换按钮样式 */
.wiki-type-toggle {
    display: flex;
    justify-content: flex-start;
    width: auto;
    margin-bottom: 0;
    text-align: left;
}

.toggle-container {
    display: flex;
    gap: 15px;
    text-align: left;
}

.toggle-btn {
    color: #999;
    font-size: 20px;  /* 增大字体大小 */
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    opacity: 0.7;  /* 未选中状态半透明 */
    text-align: left;
    display: flex;  /* Add this */
    align-items: flex-end;  /* Add this to align text at bottom */
    line-height: 1.2;  /* Adjust line height for consistent alignment */
}

.toggle-btn.active {
    color: #333;
    font-size: 28px;  /* 选中状态更大 */
    font-weight: 700;
    opacity: 1;
    display: flex;  /* Add this */
    align-items: flex-end;  /* Add this to align text at bottom */
    line-height: 1.2;  /* Adjust line height for consistent alignment */
}

/* 添加动画效果 */
@keyframes toggleFade {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.toggle-btn {
    animation: toggleFade 0.5s ease;
}

/* 暗色模式 */
[data-theme="dark"] .toggle-btn {
    color: #666;
    opacity: 0.6;
}

[data-theme="dark"] .toggle-btn.active {
    color: #f0f0f0;
    opacity: 1;
}

/* Wiki 条目样式 */
.wiki-entries {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 900px;
    margin: 0 auto 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    overflow: hidden;
}

.news-card {
    background: white;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    cursor: pointer;
    width: 100%;
    padding: 0 20px;
}

.news-card:last-child {
    border-bottom: none;
}

.news-card:hover {
    background-color: rgba(59, 130, 246, 0.02);
}

.news-card-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 15px 0;
}

.news-card-title {
    font-size: 1.1rem;  /* 增大字体大小 */
    color: #333;
    font-weight: 600;  /* 增加字重 */
    flex-grow: 1;
    margin-right: 15px;
    line-height: 1.4;  /* 增加行高 */
    letter-spacing: 0.5px;  /* 增加字间距 */
}

.news-card-meta {
    display: flex;
    align-items: center;
    color: #666;
    font-size: 0.7rem;  /* 减小字体大小 */
    gap: 8px;  /* 减小间距 */
    width: 100%;
    line-height: 1.2;  /* 减小行高 */
}

.news-card-tag {
    background: rgba(59, 130, 246, 0.05);
    color: #3b82f6;
    padding: 2px 6px;  /* 减小内边距 */
    border-radius: 4px;  /* 略微减小圆角 */
    font-weight: 500;
    font-size: 0.65rem;  /* 减小字体大小 */
    display: inline-flex;
    align-items: center;
    gap: 3px;  /* 减小图标与文字间距 */
}

.news-card-tag.version-tag {
    background: rgba(96, 125, 139, 0.05);
    color: #607D8B;
}

.news-card-date {
    color: #888;
    min-width: 80px;  /* 减小最小宽度 */
    text-align: right;
    font-size: 0.65rem;  /* 减小字体大小 */
}

/* 不同分类的标签样式 */
.news-card-tag.手机-tag {
    background: rgba(33, 150, 243, 0.1);
    color: #2196F3;
}

.news-card-tag.平板-tag {
    background: rgba(76, 175, 80, 0.1);
    color: #4CAF50;
}

.news-card-tag.穿戴设备-tag {
    background: rgba(255, 152, 0, 0.1);
    color: #FF9800;
}

.news-card-tag.产品发布-tag {
    background: rgba(156, 39, 176, 0.1);
    color: #9C27B0;
}

.news-card-tag.技术前沿-tag {
    background: rgba(0, 150, 136, 0.1);
    color: #009688;
}

.news-card-tag.行业动态-tag {
    background: rgba(244, 67, 54, 0.1);
    color: #F44336;
}

/* 暗色模式适配 */
[data-theme="dark"] .news-card-tag.手机-tag {
    background: rgba(33, 150, 243, 0.2);
    color: #4FC3F7;
}

[data-theme="dark"] .news-card-tag.平板-tag {
    background: rgba(76, 175, 80, 0.2);
    color: #81C784;
}

[data-theme="dark"] .news-card-tag.穿戴设备-tag {
    background: rgba(255, 152, 0, 0.2);
    color: #FFB74D;
}

[data-theme="dark"] .news-card-tag.产品发布-tag {
    background: rgba(156, 39, 176, 0.2);
    color: #BA68C8;
}

[data-theme="dark"] .news-card-tag.技术前沿-tag {
    background: rgba(0, 150, 136, 0.2);
    color: #4DB6AC;
}

[data-theme="dark"] .news-card-tag.行业动态-tag {
    background: rgba(244, 67, 54, 0.2);
    color: #E57373;
}

/* 暗色模式适配 */
[data-theme="dark"] .wiki-entries {
    background: #1f1f1f;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

[data-theme="dark"] .news-card {
    background: transparent;
    border-bottom-color: rgba(255,255,255,0.05);
}

[data-theme="dark"] .news-card:hover {
    background-color: rgba(74, 144, 226, 0.05);
}

[data-theme="dark"] .news-card-title {
    color: #e0e0e0;  /* 略微亮一些的颜色 */
    font-weight: 600;
}

[data-theme="dark"] .news-card-meta {
    color: #aaa;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .wiki-entries {
        max-width: 100%;
        padding: 0 10px;
    }
    
    .news-card {
        padding: 0 15px;
    }
    
    .news-card-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    
    .news-card-meta {
        width: 100%;
        justify-content: space-between;
    }
}

/* Wiki 搜索栏样式 */
.wiki-search {
    width: 100%;
    max-width: 600px;
    margin: 2px auto;
    padding: 0 15px;
}

.search-box {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 30px;
    padding: 8px 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.search-box:focus-within {
    box-shadow: 0 6px 12px rgba(59, 130, 246, 0.2);
    transform: translateY(-2px);
}

.search-icon {
    color: #3b82f6;
    margin-right: 10px;
    font-size: 18px;
}

#wikiSearch {
    flex-grow: 1;
    border: none;
    background: transparent;
    font-size: 16px;
    color: #333;
    outline: none;
    width: 100%;
}

.search-shortcut {
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
    pointer-events: none;
    background: none;
}

.search-shortcut kbd {
    background-color: #f0f0f0;  /* 浅灰色背景 */
    border: 1px solid #e0e0e0;  /* 稍微深一点的边框 */
    border-radius: 4px;  /* 圆角 */
    color: #666;
    font-size: 12px;
    padding: 2px 6px;  /* 增加一些内边距 */
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);  /* 轻微阴影 */
}

/* 暗色模式适配 */
[data-theme="dark"] .search-shortcut kbd {
    background-color: #3a3a3a;  /* 深灰色背景 */
    border-color: #4a4a4a;
    color: #a0a0a0;
}

/* 响应式搜索栏 */
@media (max-width: 768px) {
    .search-box {
        padding: 8px 12px;
    }

    #wikiSearch {
        font-size: 14px;
    }

    .search-shortcut {
        display: none;
    }
}

/* 新增的 news-card-text 样式 */
.news-card-text {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 8px;
}

.news-card-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 15px 0;
}

.news-card-meta {
    display: flex;
    align-items: center;
    color: #666;
    font-size: 0.7rem;  /* 减小字体大小 */
    gap: 8px;  /* 减小间距 */
    width: 100%;
    line-height: 1.2;  /* 减小行高 */
}

/* 轮播图样式 */
.wiki-carousel {
    width: 100%;
    max-width: 900px;
    margin: 5px 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.swiper.wiki-swiper {
    width: 100%;
    height: 300px;
}

.carousel-item {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 20px;
    color: white;
    transition: transform 0.3s ease;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Add image optimization */
    will-change: background-image;
    transition: background-image 0.3s ease-in-out;
}

.carousel-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.));
    transition: background 0.3s ease;
}

.carousel-item:hover::before {
    background: linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.0));
}

.carousel-content {
    position: relative;
    z-index: 10;
    max-width: 70%;
}

.carousel-content h3 {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.3;
}

.carousel-content p {
    font-size: 1.2rem;
    opacity: 0.9;
}

.swiper-button-prev,
.swiper-button-next {
    color: white !important;
    background: rgba(0,0,0,0.3);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swiper-pagination-bullet {
    background: white !important;
    opacity: 0.6;
}

.swiper-pagination-bullet-active {
    opacity: 1;
}

/* 暗色模式适配 */
[data-theme="dark"] .wiki-carousel {
    box-shadow: 0 4px 15px rgba(255,255,255,0.1);
}

[data-theme="dark"] .carousel-item::before {
    background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.8));
}

[data-theme="dark"] .carousel-content h3 {
    color: #f0f0f0;
}

[data-theme="dark"] .carousel-content p {
    color: #e0e0e0;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .wiki-carousel {
        max-width: 100%;
        border-radius: 0;
    }

    .swiper.wiki-swiper {
        height: 200px;
    }

    .carousel-content h3 {
        font-size: 1.4rem;
    }

    .carousel-content p {
        font-size: 0.9rem;
    }
}

/* 版本筛选样式 */
.version-filter {
    width: 100%;
    padding: 10px 15px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    margin-top: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    border: 1px solid rgba(0,0,0,0.05);
}

.filter-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.filter-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
}

.filter-section label {
    margin-bottom: 8px;
    font-size: 0.85rem;
    color: #4a4a4a;
    font-weight: 600;
    position: relative;
    padding-left: 15px;
}

.filter-section label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background-color: #4a90e2;
    border-radius: 50%;
}

.filter-section select {
    padding: 10px 15px;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 8px;
    font-size: 0.9rem;
    background: white;
    transition: all 0.3s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234a90e2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    cursor: pointer;
}

.filter-section select:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.15);
}

/* 暗色模式适配 */
[data-theme="dark"] .version-filter {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .filter-section label {
    color: #e0e0e0;
}

[data-theme="dark"] .filter-section label::before {
    background-color: #4FC3F7;
}

[data-theme="dark"] .filter-section select {
    background: rgba(0, 0, 0, 0.3);
    color: #f0f0f0;
    border-color: rgba(255, 255, 255, 0.1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234FC3F7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

[data-theme="dark"] .filter-section select:focus {
    box-shadow: 0 0 0 3px rgba(79, 195, 247, 0.15);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .filter-container {
        flex-direction: column;
        gap: 15px;
    }
    
    .filter-section {
        width: 100%;
    }
}

/* 搜索栏优化样式 */
.search-container {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.search-wrapper {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
}

#wiki-search-input {
    width: 100%;
    padding: 12px 12px 12px 45px;  /* 增加左侧内边距 */
    padding-left: 50px;  /* 增加左侧内边距，为放大镜腾出更多空间 */
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    font-size: 16px;
    transition: all 0.3s ease;
    background-color: #f9f9f9;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* 搜索图标 */
.search-icon {
    position: absolute;
    left: 20px;  /* 稍微向右移动放大镜 */
    top: 50%;
    transform: translateY(-50%);
    color: #a0a0a0;
    font-size: 18px;
    pointer-events: none;
    transition: color 0.3s ease;
    z-index: 10;
}

#wiki-search-input:focus + .search-icon {
    color: #3b82f6;
}

#wiki-search-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 4px 10px rgba(59,130,246,0.1);
    background-color: white;
}

#wiki-search-input::placeholder {
    color: #a0a0a0;
    transition: color 0.3s ease;
}

#wiki-search-input:focus::placeholder {
    color: #c0c0c0;
}

/* 暗色模式适配 */
[data-theme="dark"] #wiki-search-input {
    background-color: #2c2c2c;
    border-color: #444;
    color: #f0f0f0;
}

[data-theme="dark"] #wiki-search-input:focus {
    border-color: #4f46e5;
    background-color: #1f2937;
}

[data-theme="dark"] .search-container::before {
    color: #666;
}

[data-theme="dark"] #wiki-search-input:focus + .search-container::before {
    color: #6366f1;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .search-container {
        padding: 0 10px;
    }

    #wiki-search-input {
        font-size: 14px;
        padding: 10px 40px 10px 35px;
    }

    .search-container::before {
        right: 25px;
    }
}

/* ⌘K 快捷键样式 */
.search-container {
    position: relative;
}

.search-shortcut {
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
    pointer-events: none;
}

.search-shortcut kbd {
    background-color: transparent;
    border: none;
    color: #888;
    font-size: 12px;
    padding: 0;
    box-shadow: none;
}

/* 暗色模式适配 */
[data-theme="dark"] .search-shortcut kbd {
    color: #666;
}

/* 响应式隐藏 */
@media (max-width: 768px) {
    .search-shortcut {
        display: none;
    }
}

/* 移动端适配 */
@media (max-width: 768px) {
    .header-content,
    .search-container,
    .wiki-carousel {
        max-width: 100%;
        padding: 0 0px;
    }
}

/* 移动端隐藏 search-shortcut */
@media (max-width: 768px) {
    .search-shortcut {
        display: none !important;
    }
}

.version-category-filter {
    width: 100%;
    max-width: 900px;
    transition: all 0.3s ease;
}

.filter-container {
    background-color: #F5F5F5;
    border-radius: 16px;
    padding: 12px;

    transition: all 0.3s ease;
}

.filter-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.filter-chip-group {
    display: flex;
    gap: 15px;
    flex-grow: 1;
}

.filter-chip {
    flex: 1;
    position: relative;
    background-color: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    transition: all 0.3s ease;
    overflow: hidden;
}

.filter-chip:hover {
    border-color: #4a90e2;
    box-shadow: 0 4px 15px rgba(74,144,226,0.1);
}

.filter-chip-select {
    width: 100%;
    padding: 10px 40px 10px 15px;
    border: none;
    background: transparent;
    appearance: none;
    font-size: 0.9rem;
    color: #333;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234a90e2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
}

.filter-chip-select:focus {
    outline: 2px solid rgba(74,144,226,0.3);
}

.filter-reset-btn {
    background-color: #f5f5f5;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    width: 38px;  /* 减小宽度 */
    height: 38px; /* 减小高度 */
    color: #4a4a4a;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.filter-reset-btn i {
    font-size: 16px; /* 减小图标大小 */
    transition: transform 0.3s ease, color 0.3s ease;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .filter-reset-btn {
        width: 35px;  /* 移动端更小 */
        height: 35px;
    }

    .filter-reset-btn i {
        font-size: 14px;
    }
}

.filter-reset-btn:hover {
    border-color: #4a90e2;
    box-shadow: 0 4px 15px rgba(74,144,226,0.1);
    color: #4a90e2;
}

.filter-reset-btn i {
    font-size: 18px;
    transition: transform 0.3s ease;
}

.filter-reset-btn:hover i {
    transform: rotate(180deg);
}

/* 暗色模式适配 */
[data-theme="dark"] .filter-reset-btn {
    background-color: #3a3a3a;
    border-color: #444;
    color: #e0e0e0;
}

[data-theme="dark"] .filter-reset-btn:hover {
    border-color: #4FC3F7;
    box-shadow: 0 4px 15px rgba(79,195,247,0.1);
    color: #4FC3F7;
}

@media (max-width: 480px) {

    .filter-container {
        padding: 8px;
        border-radius: 12px;
    }

    .filter-chip-select {
        padding: 8px 35px 8px 12px;
        font-size: 0.85rem;
    }
}

.wiki-carousel .swiper-slide img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 768px) {
    .wiki-carousel .swiper-slide img {
        width: 100%;
        height: auto;
        object-fit: cover;
        object-position: center;
    }

    .swiper.wiki-swiper {
        height: 170px;
    }
}

/* 版本分类筛选器 - 黑暗模式适配 */
[data-theme="dark"] .version-category-filter .filter-container {
    background-color: #2c2c2c;
    border: 1px solid rgba(255,255,255,0.1);
}

[data-theme="dark"] .version-category-filter .filter-chip {
    background-color: #3a3a3a;
    border-color: rgba(255,255,255,0.1);
}

[data-theme="dark"] .version-category-filter .filter-chip:hover {
    border-color: #4FC3F7;
    box-shadow: 0 4px 15px rgba(79,195,247,0.1);
}

[data-theme="dark"] .version-category-filter .filter-chip-select {
    color: #e0e0e0;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234FC3F7' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

[data-theme="dark"] .version-category-filter .filter-chip-select option {
    background-color: #2c2c2c;
    color: #e0e0e0;
}

[data-theme="dark"] .version-category-filter .filter-reset-btn {
    background-color: #3a3a3a;
    border-color: rgba(255,255,255,0.1);
    color: #e0e0e0;
}

[data-theme="dark"] .version-category-filter .filter-reset-btn:hover {
    border-color: #4FC3F7;
    color: #4FC3F7;
    box-shadow: 0 4px 15px rgba(79,195,247,0.1);
}

[data-theme="dark"] .version-category-filter .filter-reset-btn i {
    color: #e0e0e0;
    transition: color 0.3s ease;
}

[data-theme="dark"] .version-category-filter .filter-reset-btn:hover i {
    color: #4FC3F7;
}
</style>

<script>
var wikiSwiper;
document.addEventListener('DOMContentLoaded', function() {
    var toggleBtns = document.querySelectorAll('.toggle-btn');
    var newsCards = document.querySelectorAll('.news-card');
    var wikiCarousel = document.querySelector('.wiki-carousel');
    var lastSelectedType = localStorage.getItem('wikiSelectedType') || 'news';
    
    toggleBtns.forEach(function(btn) {
        btn.classList.toggle('active', btn.dataset.type === lastSelectedType);
    });

    // 控制轮播图显示
    wikiCarousel.style.display = lastSelectedType === 'news' ? 'block' : 'none';

    newsCards.forEach(function(card) {
        card.style.display = (lastSelectedType === 'news' && !card.classList.contains('version-card')) ||
                             (lastSelectedType === 'version' && card.classList.contains('version-card')) ? '' : 'none';
    });

    toggleBtns.forEach(function(btn) {
        btn.addEventListener('click', function() {
            toggleBtns.forEach(function(b) { b.classList.remove('active'); });
            this.classList.add('active');

            var type = this.dataset.type;
            localStorage.setItem('wikiSelectedType', type);

            // 控制轮播图显示
            wikiCarousel.style.display = type === 'news' ? 'block' : 'none';

            newsCards.forEach(function(card) {
                card.style.display = (type === 'news' && !card.classList.contains('version-card')) ||
                                     (type === 'version' && card.classList.contains('version-card')) ? '' : 'none';
            });
        });
    });

    // 优化轮播图图片加载和缓存
    const CAROUSEL_VERSION = '20240101';
    const carouselImages = [
        '/static/images/carousel/banner1.png?v=' + CAROUSEL_VERSION,
        '/static/images/carousel/banner2.png?v=' + CAROUSEL_VERSION
    ];

    // 高级缓存管理
    function getImageCacheKey(imageSrc) {
        return `wiki_carousel_image_cache_${imageSrc.split('?')[0].split('/').pop()}_${CAROUSEL_VERSION}`;
    }

    // 检查并应用图片缓存
    function applyCachedCarouselImages() {
        const carouselSlides = document.querySelectorAll('.swiper-slide .carousel-item');
        
        carouselSlides.forEach((slide, index) => {
            const imageSrc = carouselImages[index];
            const cacheKey = getImageCacheKey(imageSrc);
            
            // 尝试从缓存获取图片数据
            const cachedImageData = localStorage.getItem(cacheKey);
            
            if (cachedImageData) {
                // 如果有缓存，直接应用缓存的背景图
                slide.style.backgroundImage = `url(${imageSrc})`;
                console.log(`使用缓存图片: ${imageSrc}`);
            } else {
                // 如果没有缓存，预加载并缓存
                const img = new Image();
                img.onload = function() {
                    // 缓存图片
                    slide.style.backgroundImage = `url(${imageSrc})`;
                    localStorage.setItem(cacheKey, 'loaded');
                    console.log(`预加载并缓存图片: ${imageSrc}`);
                };
                img.src = imageSrc;
            }
        });
    }

    // 清理旧的缓存（可选）
    function cleanupOldCache() {
        Object.keys(localStorage).forEach(key => {
            if (key.startsWith('wiki_carousel_image_cache_') && 
                !key.includes(CAROUSEL_VERSION)) {
                localStorage.removeItem(key);
            }
        });
    }

    // 网络状态缓存策略
    function enhancedCacheStrategy() {
        if ('serviceWorker' in navigator) {
            navigator.serviceWorker.register('/static/sw-wiki-carousel.js')
                .then(registration => {
                    console.log('Service Worker 注册成功:', registration);
                })
                .catch(error => {
                    console.log('Service Worker 注册失败:', error);
                });
        }
    }

    // 执行缓存策略
    cleanupOldCache();
    applyCachedCarouselImages();
    enhancedCacheStrategy();

    // 初始化轮播图（保持原有逻辑）
    wikiSwiper = new Swiper('.wiki-swiper', {
        slidesPerView: 1,
        spaceBetween: 0,
        loop: true,
        autoplay: {
            delay: 5000,
            disableOnInteraction: false
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
        },
        effect: 'slide',
        speed: 600
    });
});

// 版本筛选功能
function populateVersionFilters() {
    const newsCards = document.querySelectorAll('.news-card.version-card');
    const firstLevelSelect = document.getElementById('first-level-select');
    const secondLevelSelect = document.getElementById('second-level-select');
    const versionFilter = document.querySelector('.version-filter');

    // 重置下拉选项
    firstLevelSelect.innerHTML = '<option value="">全部</option>';
    secondLevelSelect.innerHTML = '<option value="">全部</option>';

    // 从服务器获取分类数据
    fetch('/admin/wiki/categories?pre=true')
        .then(response => {
            if (!response.ok) {
                throw new Error('获取分类数据失败');
            }
            return response.json();
        })
        .then(data => {
            console.log('获取的分类数据:', data);

            // 收集唯一的分类
            const firstLevels = new Set();
            const secondLevels = new Set();

            // 处理获取的分类数据
            data.categories.forEach(category => {
                if (category.first_level === '版本号') {
                    firstLevels.add(category.first_level);
                    secondLevels.add(category.second_level);
                }
            });

            // 填充一级分类
            firstLevels.forEach(level => {
                const option = document.createElement('option');
                option.value = level;
                option.textContent = level;
                firstLevelSelect.appendChild(option);
            });

            // 二级分类联动
            firstLevelSelect.addEventListener('change', function() {
                const selectedFirst = this.value;
                secondLevelSelect.innerHTML = '<option value="">全部</option>';

                data.categories.forEach(category => {
                    if (selectedFirst === '' || category.first_level === selectedFirst) {
                        const option = document.createElement('option');
                        option.value = category.second_level;
                        option.textContent = category.second_level;
                        if (!Array.from(secondLevelSelect.options).some(opt => opt.value === category.second_level)) {
                            secondLevelSelect.appendChild(option);
                        }
                    }
                });
            });

            // 筛选逻辑
            function filterVersions() {
                const selectedFirst = firstLevelSelect.value;
                const selectedSecond = secondLevelSelect.value;

                newsCards.forEach(card => {
                    const tagText = card.querySelector('.news-card-tag').textContent.trim();
                    const parts = tagText.split(' - ');
                    const [first, second] = [parts[0], parts[parts.length - 1]];

                    const matchFirst = selectedFirst === '' || first === selectedFirst;
                    const matchSecond = selectedSecond === '' || second === selectedSecond;

                    card.style.display = (matchFirst && matchSecond) ? '' : 'none';
                });
            }

            // 添加筛选事件监听
            firstLevelSelect.addEventListener('change', filterVersions);
            secondLevelSelect.addEventListener('change', filterVersions);

            // 切换到版本号时显示筛选器
            const toggleBtns = document.querySelectorAll('.toggle-btn');
            toggleBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    versionFilter.style.display = this.dataset.type === 'version' ? 'block' : 'none';
                    
                    // 重置筛选
                    if (this.dataset.type === 'version') {
                        firstLevelSelect.value = '';
                        secondLevelSelect.value = '';
                        filterVersions();
                    }
                });
            });

            // 初始化时根据当前选中的标签页决定是否显示筛选器
            const lastSelectedType = localStorage.getItem('wikiSelectedType') || 'news';
            versionFilter.style.display = lastSelectedType === 'version' ? 'block' : 'none';
        })
        .catch(error => {
            console.error('获取分类数据失败:', error);
        });
}

// 在 DOMContentLoaded 中调用
document.addEventListener('DOMContentLoaded', populateVersionFilters);

document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('wiki-search-input');
    const wikiEntries = document.querySelectorAll('.news-card');
    
    // 创建"未找到结果"消息元素
    const noResultsMessage = document.createElement('div');
    noResultsMessage.id = 'no-results-message';
    noResultsMessage.style.display = 'none';
    noResultsMessage.style.textAlign = 'center';
    noResultsMessage.style.color = '#666';
    noResultsMessage.style.padding = '20px';
    noResultsMessage.textContent = '未找到相关内容';

    // 将消息插入到 wiki-content
    const wikiContent = document.querySelector('.wiki-content');
    if (wikiContent) {
        wikiContent.appendChild(noResultsMessage);
    }

    function performSearch() {
        const searchTerm = searchInput.value.toLowerCase().trim();
        let matchFound = false;

        wikiEntries.forEach(entry => {
            // 使用更健壮的选择器
            const titleElement = entry.querySelector('.news-card-title');
            const tagElement = entry.querySelector('.news-card-tag');

            if (!titleElement || !tagElement) {
                console.warn('搜索元素未找到', entry);
                return;
            }

            const title = titleElement.textContent.toLowerCase();
            const tag = tagElement.textContent.toLowerCase();

            // 同时搜索标题和标签
            const isMatch = 
                title.includes(searchTerm) || 
                tag.includes(searchTerm);

            entry.style.display = isMatch ? 'block' : 'none';
            
            if (isMatch) {
                matchFound = true;
            }
        });

        // 显示/隐藏"未找到结果"消息
        if (noResultsMessage) {
            noResultsMessage.style.display = matchFound ? 'none' : 'block';
        }
    }

    // 添加搜索输入事件监听器
    if (searchInput) {
        searchInput.addEventListener('input', performSearch);
        
        // 调试日志
        console.log('Wiki 搜索功能已初始化');
        console.log('搜索输入框:', searchInput);
        console.log('Wiki 条目数量:', wikiEntries.length);
    } else {
        console.error('未找到 wiki-search-input 元素');
    }
});

document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('wiki-search-input');

    // 添加 ⌘K 快捷键功能
    document.addEventListener('keydown', function(e) {
        // 同时按下 Cmd/Ctrl 和 K
        if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
            e.preventDefault(); // 阻止默认行为
            searchInput.focus(); // 聚焦到搜索框
        }
    });

    // 点击搜索框时选中所有文本
    searchInput.addEventListener('click', function() {
        this.select();
    });
});

document.addEventListener('DOMContentLoaded', function() {
    const secondLevelFilter = document.getElementById('second-level-filter');
    const thirdLevelFilter = document.getElementById('third-level-filter');
    const wikiEntries = document.querySelectorAll('.news-card');
    const versionCategoryFilter = document.querySelector('.version-category-filter');
    const toggleBtns = document.querySelectorAll('.toggle-btn');
    const filterResetBtn = document.querySelector('.filter-reset-btn');

    // 动态填充分类选项
    function populateCategoryFilters() {
        const secondLevels = new Set();
        const thirdLevels = new Set();

        const versionEntries = Array.from(wikiEntries).filter(entry => 
            entry.classList.contains('version-card')
        );

        versionEntries.forEach(entry => {
            const secondLevel = entry.getAttribute('data-second-level');
            const thirdLevel = entry.getAttribute('data-third-level');

            if (secondLevel) secondLevels.add(secondLevel);
            if (thirdLevel) thirdLevels.add(thirdLevel);
        });

        // 填充二级分类
        secondLevelFilter.innerHTML = '<option value="">设备类型</option>';
        secondLevels.forEach(level => {
            const option = document.createElement('option');
            option.value = level;
            option.textContent = level;
            secondLevelFilter.appendChild(option);
        });

        // 填充三级分类
        thirdLevelFilter.innerHTML = '<option value="">设备型号</option>';
        thirdLevels.forEach(level => {
            const option = document.createElement('option');
            option.value = level;
            option.textContent = level;
            thirdLevelFilter.appendChild(option);
        });
    }

    // 筛选逻辑
    function filterVersionEntries() {
        const secondLevelValue = secondLevelFilter.value;
        const thirdLevelValue = thirdLevelFilter.value;

        wikiEntries.forEach(entry => {
            const isVersionCard = entry.classList.contains('version-card');
            const entrySecondLevel = entry.getAttribute('data-second-level');
            const entryThirdLevel = entry.getAttribute('data-third-level');

            const matchSecondLevel = !secondLevelValue || entrySecondLevel === secondLevelValue;
            const matchThirdLevel = !thirdLevelValue || entryThirdLevel === thirdLevelValue;

            entry.style.display = (isVersionCard && matchSecondLevel && matchThirdLevel) ? '' : 'none';
        });
    }

    // 重置筛选
    function resetFilters() {
        secondLevelFilter.value = '';
        thirdLevelFilter.value = '';
        filterVersionEntries();
    }

    // 添加事件监听器
    secondLevelFilter.addEventListener('change', filterVersionEntries);
    thirdLevelFilter.addEventListener('change', filterVersionEntries);
    filterResetBtn.addEventListener('click', resetFilters);

    // 切换标签页时控制筛选器显示
    toggleBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            const isVersionTab = this.dataset.type === 'version';
            versionCategoryFilter.style.display = isVersionTab ? 'block' : 'none';

            // 重置筛选
            if (isVersionTab) {
                resetFilters();
            }
        });
    });

    // 初始化
    populateCategoryFilters();

    // 根据当前选中的标签页决定是否显示筛选器
    const lastSelectedType = localStorage.getItem('wikiSelectedType') || 'news';
    versionCategoryFilter.style.display = lastSelectedType === 'version' ? 'block' : 'none';
});

document.addEventListener('DOMContentLoaded', function() {
    const filterTrigger = document.querySelector('.filter-trigger');
    const filterDropdown = document.querySelector('.filter-dropdown');
    const secondLevelOptions = document.getElementById('second-level-options');
    const thirdLevelOptions = document.getElementById('third-level-options');
    const resetFilterBtn = document.querySelector('.reset-filter');
    const applyFilterBtn = document.querySelector('.apply-filter');
    const wikiEntries = document.querySelectorAll('.news-card');

    // 切换筛选器显示
    filterTrigger.addEventListener('click', function() {
        filterDropdown.style.display = filterDropdown.style.display === 'block' ? 'none' : 'block';
    });

    // 点击外部关闭筛选器
    document.addEventListener('click', function(event) {
        if (!filterTrigger.contains(event.target) && !filterDropdown.contains(event.target)) {
            filterDropdown.style.display = 'none';
        }
    });

    // 动态生成分类选项
    function generateCategoryOptions() {
        const secondLevels = new Set();
        const thirdLevels = new Set();

        const versionEntries = Array.from(wikiEntries).filter(entry => 
            entry.classList.contains('version-card')
        );

        versionEntries.forEach(entry => {
            const secondLevel = entry.getAttribute('data-second-level');
            const thirdLevel = entry.getAttribute('data-third-level');

            if (secondLevel) secondLevels.add(secondLevel);
            if (thirdLevel) thirdLevels.add(thirdLevel);
        });

        // 生成二级分类选项
        secondLevelOptions.innerHTML = '';
        secondLevels.forEach(level => {
            const option = document.createElement('div');
            option.classList.add('filter-option');
            option.textContent = level;
            option.setAttribute('data-value', level);
            option.addEventListener('click', () => toggleOption(option));
            secondLevelOptions.appendChild(option);
        });

        // 生成三级分类选项
        thirdLevelOptions.innerHTML = '';
        thirdLevels.forEach(level => {
            const option = document.createElement('div');
            option.classList.add('filter-option');
            option.textContent = level;
            option.setAttribute('data-value', level);
            option.addEventListener('click', () => toggleOption(option));
            thirdLevelOptions.appendChild(option);
        });
    }

    // 切换选项选中状态
    function toggleOption(option) {
        option.classList.toggle('selected');
    }

    // 重置筛选
    resetFilterBtn.addEventListener('click', function() {
        document.querySelectorAll('.filter-option').forEach(option => {
            option.classList.remove('selected');
        });
    });

    // 应用筛选
    applyFilterBtn.addEventListener('click', function() {
        const selectedSecondLevels = Array.from(
            secondLevelOptions.querySelectorAll('.filter-option.selected')
        ).map(el => el.getAttribute('data-value'));

        const selectedThirdLevels = Array.from(
            thirdLevelOptions.querySelectorAll('.filter-option.selected')
        ).map(el => el.getAttribute('data-value'));

        wikiEntries.forEach(entry => {
            const isVersionCard = entry.classList.contains('version-card');
            const entrySecondLevel = entry.getAttribute('data-second-level');
            const entryThirdLevel = entry.getAttribute('data-third-level');

            const matchSecondLevel = selectedSecondLevels.length === 0 || 
                selectedSecondLevels.includes(entrySecondLevel);
            const matchThirdLevel = selectedThirdLevels.length === 0 || 
                selectedThirdLevels.includes(entryThirdLevel);

            entry.style.display = (isVersionCard && matchSecondLevel && matchThirdLevel) ? '' : 'none';
        });

        filterDropdown.style.display = 'none';
    });

    // 初始化
    generateCategoryOptions();
});

document.addEventListener('DOMContentLoaded', function() {
    // Preload carousel images for better performance
    const carouselImages = [
        '/static/images/carousel/banner1.png?v=20240101',
        '/static/images/carousel/banner2.png?v=20240101'
    ];

    carouselImages.forEach(imageSrc => {
        const img = new Image();
        img.src = imageSrc;
    });
});
</script>
{% endblock %}