{% extends 'base.html' %}

{% block title %}单位简介 - {% endblock %}

{% block content %}
    <div class="container">
        <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="#">网站首页</a></li>
                <li class="breadcrumb-item active" aria-current="page">单位简介</li>
            </ol>
        </nav>
        <div class="row" style="height: 500px;margin: auto auto 15px;">
            <div class="col-4">
                <div class="news-card" style="height: 100%;">
                    <div class="custom-tabs-header">
                        <div class="tabs-header-wrapper">
                            <ul class="nav nav-tabs" id="newsTab_{{ unique_id }}" role="tablist">
                                <li class="nav-item">
                                    {# 确定显示名称：如果有 labels 字典则取 labels.tab_id，否则直接用 tab_id (或进行capitalize处理) #}

                                    {# 如果 default 返回的是英文 key，可以在这里做简单的格式化，比如首字母大写，或者保持原样 #}
                                    <a class="nav-link active"
                                       id="{{ tab_id }}-tab_{{ unique_id }}"
                                       data-toggle="tab"
                                       href="#"
                                       role="tab"
                                       aria-selected="true">
                                        领导信息
                                    </a>

                                </li>


                            </ul>

                        </div>
                    </div>
                    <div class="tab-content intro-text">

                        <p>
                            长白山消防救援支队，是隶属于吉林省长白山保护开发区管理委员会的综合性消防救援队伍，负责辖区内的火灾预防、扑救和应急救援工作。
                        </p>

                        <p><strong>官方信息与联系方式：</strong></p>
                        <p>
                            官方信息平台与联系方式：长白山消防救援支队的相关信息主要通过长白山保护开发区管理委员会官方网站的“政务公开
                            - 机构设置”栏目进行发布。根据其 2025 年政府信息公开年度报告，公众可通过以下方式联系该支队：
                        </p>

                        <div class="contact-info">
                            <p><strong>联系电话/传真：</strong>0433-5312088</p>
                            <p><strong>办公地址：</strong>长白山保护开发区消防救援支队防火监督与政策法规科 101
                                室（邮编：133613）</p>
                            <p><strong>电子邮箱：</strong>306098022@qq.com</p>
                        </div>

                        <p><strong>主要职责与工作重点：</strong></p>
                        <p>
                            作为长白山地区的核心消防救援力量，该支队承担着“全灾种、大应急”的综合性救援任务，其工作重点紧密围绕辖区特点展开。
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-8">
                <div class="news-card" style=" height: 500px;">
                    <div class="custom-tabs-header">
                        <div class="tabs-header-wrapper">
                            <ul class="nav nav-tabs" id="newsTab_{{ unique_id }}" role="tablist">

                                <li class="nav-item">
                                    {# 确定显示名称：如果有 labels 字典则取 labels.tab_id，否则直接用 tab_id (或进行capitalize处理) #}

                                    {# 如果 default 返回的是英文 key，可以在这里做简单的格式化，比如首字母大写，或者保持原样 #}
                                    <a class="nav-link active"
                                       id="{{ tab_id }}-tab_{{ unique_id }}"
                                       data-toggle="tab"
                                       href="#"
                                       role="tab"
                                       aria-selected="true">
                                        单位简介
                                    </a>

                                </li>


                            </ul>

                        </div>
                    </div>
                    <div class="tab-content intro-text">

                        <p>
                            长白山消防救援支队，是隶属于吉林省长白山保护开发区管理委员会的综合性消防救援队伍，负责辖区内的火灾预防、扑救和应急救援工作。
                        </p>

                        <p><strong>官方信息与联系方式：</strong></p>
                        <p>
                            官方信息平台与联系方式：长白山消防救援支队的相关信息主要通过长白山保护开发区管理委员会官方网站的“政务公开
                            - 机构设置”栏目进行发布。根据其 2025 年政府信息公开年度报告，公众可通过以下方式联系该支队：
                        </p>

                        <div class="contact-info">
                            <p><strong>联系电话/传真：</strong>0433-5312088</p>
                            <p><strong>办公地址：</strong>长白山保护开发区消防救援支队防火监督与政策法规科 101
                                室（邮编：133613）</p>
                            <p><strong>电子邮箱：</strong>306098022@qq.com</p>
                        </div>

                        <p><strong>主要职责与工作重点：</strong></p>
                        <p>
                            作为长白山地区的核心消防救援力量，该支队承担着“全灾种、大应急”的综合性救援任务，其工作重点紧密围绕辖区特点展开。
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row" style="height: 300px;margin: auto auto 15px;">
            <div class="col-12">
                <div class="news-card">
                    <div class="custom-tabs-header">
                        <div class="tabs-header-wrapper">
                            <ul class="nav nav-tabs" id="newsTab_{{ unique_id }}" role="tablist">

                                <li class="nav-item">
                                    {# 确定显示名称：如果有 labels 字典则取 labels.tab_id，否则直接用 tab_id (或进行capitalize处理) #}

                                    {# 如果 default 返回的是英文 key，可以在这里做简单的格式化，比如首字母大写，或者保持原样 #}
                                    <a class="nav-link active"
                                       id="{{ tab_id }}-tab_{{ unique_id }}"
                                       data-toggle="tab"
                                       href="#"
                                       role="tab"
                                       aria-selected="true">
                                        组织结构
                                    </a>

                                </li>


                            </ul>

                        </div>
                    </div>
                    <div class="tab-content news-list-body" id="newsTabContent_{{ unique_id }}">
                        <ul class="list-unstyled">
                            {# items 就是当前 key 对应的列表数据，直接使用 #}
                            {% if items %}
                                {% for item in items %}
                                    <li class="news-item">
                                        <div class="news-title-wrapper">
                                            <span class="bullet-point"></span>
                                            <span class="news-title-text"
                                                  title="{{ item.title }}">{{ item.title|truncatechars:30 }}</span>
                                        </div>
                                        <span class="news-date">{{ item.date }}</span>
                                    </li>
                                {% endfor %}
                            {% else %}
                                <li class="text-muted text-center py-2">暂无数据</li>
                            {% endif %}
                        </ul>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        .intro-text {
            font-size: 13px;
            padding: 10px;
        }
    </style>
{% endblock %}