{% extends 'base.html' %}
{% load static %}
{% block title %}{{ main_section.title }} - {% endblock %}
{% block content %}
    <div class="container">
        <div class="container row align-items-center justify-content-between">
            <nav aria-label="breadcrumb" style="margin-left: -10px;">
                <ol class="breadcrumb" style="background-color: transparent !important;padding-bottom: 0;">
                    <li class="breadcrumb-item"><a href="/" style="color: #23408A; text-decoration: none;">网站首页</a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">
                        <a href="{% url "front:main_list" main=main_section.code %}"
                           style="color: #23408A; text-decoration: none;"
                        >
                            {{ main_section.title }}
                        </a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">
                        {{ sub_section.title }}
                    </li>
                </ol>
            </nav>
            <form class="search-form" action="{% url 'front:search_list' %}">
                <div class="search-wrapper" style="border: solid 1px #23408a85">
                    <input type="text" class="search-input" name="q">
                    <button type="submit" class="search-btn">
                        <img src="{% static "icons/search_23418A.svg" %}" alt="" style="border-radius: 15px;">
                    </button>
                </div>
            </form>
        </div>
        <div class="row" style="height: 100%;margin: 15px auto;margin-right: 0 !important;">
            <div class="col-3">
                <ul class="list-group">
                    {% if  '/news' in request.path %}
                        <li class="list-group-item" style="background: #23418A; color: #f5f5f5">
                            <a href="{% url "front:news" %}"
                               style="color: #F5F5F5;text-decoration: none;">
                                <h5 style="margin: 0; padding: 0; line-height: 1.2;">{{ main_section.title }}</h5>
                            </a>
                        </li>
                        {% for sec in sections %}
                            <!-- 核心修改：判断当前路径是否包含该子栏目的 code -->
                            {% if '/news' in request.path and sec.code in request.path %}
                                <li class="list-group-item" style="background: #e9ecef;"> <!-- 选中样式：灰色背景 -->
                                    <a href="{% url "front:news_list" sub=sec.code %}"
                                       style="color: #23418A; text-decoration: none; font-weight: bold;"> {{ sec.title }}</a>
                                </li>
                            {% else %}
                                <li class="list-group-item">
                                    <a href="{% url "front:news_list" sub=sec.code %}"
                                       style="color: #1d2124; text-decoration: none;"> {{ sec.title }}</a>
                                </li>
                            {% endif %}
                        {% endfor %}
                    {% elif '/search' in request.path %}
                        <li class="list-group-item" style="background: #23418A; color: #f5f5f5">
                            <a href="{% url "front:main_list" main=main_section.code %}"
                               style="color: #F5F5F5;text-decoration: none;">
                                <h5 style="margin: 0; padding: 0; line-height: 1.2;">{{ main_section.title }}</h5>
                            </a>
                        </li>
                        {% for sec in sections %}
                            {% if sec.code == current_sec.code %}
                                <li class="list-group-item" style="background: #e9ecef;">
                                    <a href="{% url "front:search_section_list" sec=current_sec %}?{% if q %}q={{ q }}{% endif %}"
                                       style="color: #23418A; text-decoration: none; font-weight: bold;"> {{ sec.title }}</a>
                                </li>
                            {% else %}
                                <li class="list-group-item">
                                    <a href="{% url "front:search_section_list" sec=sec.code %}?{% if q %}q={{ q }}{% endif %}"
                                       style="color: #1d2124; text-decoration: none;"> {{ sec.title }}</a>
                                </li>
                            {% endif %}

                        {% endfor %}
                    {% else %}
                        <li class="list-group-item" style="background: #23418A; color: #f5f5f5">
                            <a href="{% url "front:main_list" main=main_section.code %}"
                               style="color: #F5F5F5;text-decoration: none;">
                                <h5 style="margin: 0; padding: 0; line-height: 1.2;">{{ main_section.title }}</h5>
                            </a>
                        </li>
                        {% for sec in sections %}
                            {% if sec.code in request.path %}
                                <li class="list-group-item" style="background: #e9ecef;">
                                    <a href="{% url "front:sub_list" main=main_section.code sub=sec.code %}"
                                       style="color: #23418A; text-decoration: none; font-weight: bold;"> {{ sec.title }}</a>
                                </li>
                            {% else %}
                                <li class="list-group-item">
                                    <a href="{% url "front:sub_list" main=main_section.code|default:sec.parent.code sub=sec.code %}"
                                       style="color: #1d2124; text-decoration: none;"> {{ sec.title }}</a>
                                </li>
                            {% endif %}

                        {% endfor %}
                    {% endif %}
                </ul>

            </div>
            <div class="col-9" style="width: 100%;padding-right: 0 !important;">
                <!-- 组件开始 -->
                <div class="section-header-card">

                    <!-- 左侧文字内容 -->
                    <div class="header-content">
                        <div class="header-title">
                            <span class="icon-circle"></span>
                            {{ sub_section.title | default:main_section.title }}
                        </div>
                        <hr class="divider-line">
                    </div>

                    {#                <!-- 右侧装饰色块 -->#}
                    {#                <div class="right-decoration">#}
                    {#                    <div class="deco-top"></div>#}
                    {#                    <div class="deco-bottom"></div>#}
                    {#                </div>#}
                    <ul class="list-unstyled mb-0">
                        {# items 就是当前 key 对应的列表数据，直接使用 #}
                        {% if articles %}
                            {% for item in articles %}
                                <li class="news-item">
                                    {% if '/news' in request.path %}
                                        <a href="{% url "front:news_detail" pk=item.id %}"
                                           style="text-decoration: none;color: black;">
                                    {% else %}
                                        <a href="{% url "front:article_detail" pk=item.id %}"
                                           style="text-decoration: none;color: black;">
                                    {% endif %}

                                    <div class="news-title-wrapper">
                                        <span class="bullet-point"></span>
                                        <span class="news-title-text"
                                              title="{{ item.title }}">{{ item.title|truncatechars:30 }}</span>
                                    </div>
                                    </a>
                                    <span class="news-date">{{ item.created_at|date:"Y-m-d" }}</span>
                                </li>
                            {% endfor %}
                        {% else %}
                            <li class="text-muted text-center py-2">暂无数据</li>
                        {% endif %}
                    </ul>


                    <!-- 组件结束 -->
                </div>
                <ul class="pagination pagination-sm pagination-wrapper">
                    <li class="page-item disabled">
                        <a class="page-link">共 {{ articles.paginator.count }} 条</a>
                    </li>
                    <!-- 首页 -->
                    {% if articles.has_previous %}
                        <li class="page-item">
                            <a class="page-link"
                               href="?page=1{% if q %}&q={{ q }}{% endif %}">首页</a>
                        </li>
                    {% else %}
                        <li class="page-item disabled">
                            <span class="page-link">首页</span>
                        </li>
                    {% endif %}

                    <!-- 上一页 -->
                    {% if articles.has_previous %}
                        <li class="page-item">
                            <a class="page-link"
                               href="?page={{ articles.previous_page_number }}{% if q %}&q={{ q }}{% endif %}"
                               aria-label="Previous">
                                <span>上一页</span>
                            </a>
                        </li>
                    {% else %}
                        <li class="page-item disabled">
                            <span class="page-link">上一页</span>
                        </li>
                    {% endif %}

                    {# 页码核心逻辑 #}
                    {% for i in articles.paginator.page_range %}
                        {% if articles.number == i %}
                            {# 当前页 #}
                            <li class="page-item active">
                                <span class="page-link">{{ i }}</span>
                            </li>
                        {% else %}
                            {# 显示规则：第1-2页 | 当前页前后各2页 | 最后2页 #}
                            {% if i == 1 or i == 2 or i == articles.paginator.num_pages or i == articles.paginator.num_pages|add:"-1" or i >= articles.number|add:"-2" and i <= articles.number|add:"2" %}
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ i }}{% if q %}&q={{ q }}{% endif %}">{{ i }}</a>
                                </li>
                            {% elif i == articles.number|add:"-3" or i == articles.number|add:"3" %}
                                {# 省略号只出现一次 #}
                                <li class="page-item disabled">
                                    <span class="page-link">...</span>
                                </li>
                            {% endif %}
                        {% endif %}
                    {% endfor %}

                    <!-- 下一页 -->
                    {% if articles.has_next %}
                        <li class="page-item">
                            <a class="page-link"
                               href="?page={{ articles.next_page_number }}{% if q %}&q={{ q }}{% endif %}"
                               aria-label="Next">
                                <span>下一页</span>
                            </a>
                        </li>
                    {% else %}
                        <li class="page-item disabled">
                            <span class="page-link">下一页</span>
                        </li>
                    {% endif %}

                    <!-- 尾页 -->
                    {% if articles.has_next %}
                        <li class="page-item">
                            <a class="page-link"
                               href="?page={{ articles.paginator.num_pages }}{% if q %}&q={{ q }}{% endif %}"
                               aria-label="Last">
                                <span>尾页</span>
                            </a>
                        </li>
                    {% else %}
                        <li class="page-item disabled">
                            <span class="page-link">尾页</span>
                        </li>
                    {% endif %}
                    {# 6. 跳转功能 (模拟图片样式：前往 [输入框] 页) #}
                    {#                        <li class="page-item">#}
                    {#                            <span class="page-link pagination-info">前往</span>#}
                    {#                        </li>#}
                    {#                        <li class="page-item">#}
                    {#                            <input class="page-jump-input" id="gotoPageInput" type="number" min="1"#}
                    {#                                   max="{{ articles.paginator.num_pages }}" placeholder="页">#}
                    {#                        </li>#}
                    {#                        <li class="page-item d-none"> {# 这里隐藏一个提交按钮，主要靠JS触发 #}
                    {#                            <button id="jumpBtn" class="page-link" style="display: none;">确定</button>#}
                    {#                        </li>#}
                </ul>
            </div>
        </div>
    </div>
    <style>


        /* --- 组件核心样式 --- */
        .section-header-card {
            position: relative;
            width: 100%;
            min-height: 720px; /* 设置一个保底高度 */
            height: auto; /* 高度随内容增加而增加 */
            background-color: #ffffff;
            border-radius: 12px; /* 大圆角 */
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* 柔和阴影 */
            overflow: hidden; /* 确保右侧装饰块不溢出圆角 */
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-left: 30px;
        }

        /* 左侧内容区域 */
        .header-content {
            z-index: 2; /* 确保内容在装饰块之上 */
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 100%;
        }


        .list-unstyled {
            flex-grow: 1; /* 使列表占满剩余的空间 */
            padding-right: 38px;
            margin-left: 0;
            width: 100%;
        }

        .pagination-wrapper {
            display: flex;
            justify-content: end; /* 分页内容左右对齐 */
            align-items: center;
            margin: 10px auto -20px;

            padding: 5px 0;
            border-radius: 12px; /* 大圆角 */
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important; /* 柔和阴影 */
        }

        .page-link {
            border: none !important;
            color: #6C757D;
        }

        .page-item.active .page-link {
            background-color: #23408A;
            border-color: #23408A;
        }

        /* 标题部分 */
        .header-title {
            font-size: 20px;
            font-weight: 700;
            color: #23408A; /* 深蓝色文字 */
            margin-bottom: 12px;
            display: flex;
            align-items: center;
        }

        /* 空心圆圈图标 */
        .icon-circle {
            display: inline-block;
            width: 10px;
            height: 10px;
            border: 2px solid #23408A; /* 边框颜色同文字 */
            border-radius: 50%;
            margin-right: 10px;
            box-sizing: border-box; /* 确保边框包含在宽高内 */
        }

        /* 分割线 */
        .divider-line {
            width: 95%; /* 线条长度，不完全贯穿 */
            height: 2px;
            background-color: #23408A; /* 线条颜色比文字稍浅一点或保持一致 */
            border: none;
            margin: 0;
        }


    </style>
{% endblock %}