{% extends "base_template.html" %}

{% block content %}
    <div id="section1" class="section">
        <h2>章节划分</h2>
        {% for section in sections %}
            <div class="section">
                <h2>{{ section.title }}</h2>
                <p>{{ section.content }}</p>
            </div>
        {% endfor %}
    </div>
    
    <div id="section2" class="section">
        <h2>静态描述内容</h2>
        {% for component in static_descriptions %}
            <div class="component">
                <h3>{{ component.name }}</h3>
                <p>{{ component.description }}</p>
            </div>
        {% endfor %}
    </div>
    
    <div id="section3" class="section">
        <h2>动态加载内容</h2>
        {% for content in dynamic_contents %}
            <div class="content">
                <p>{{ content }}</p>
            </div>
        {% endfor %}
    </div>
    
    <div id="section4" class="section">
        <h2>报告实例化后的命名规则</h2>
        <p>{{ naming_rules }}</p>
    </div>
    
    <div id="section5" class="section">
        <h2>版本管理</h2>
        <p>当前版本：{{ version_management.current_version }}</p>
        <p>版本描述：{{ version_management.description }}</p>
        <p>版本状态：{{ version_management.status }}</p>
    </div>
    
    <div id="section6" class="section">
        <h2>报告模板的分类属性</h2>
        <p>{{ classification_attributes }}</p>
    </div>

    <div id="section7" class="section">
        <h2>表格数据</h2>
        <table>
            <tr>
                <th>列1</th>
                <th>列2</th>
                <th>列3</th>
            </tr>
            {% for row in table_data %}
            <tr>
                <td>{{ row.col1 }}</td>
                <td>{{ row.col2 }}</td>
                <td>{{ row.col3 }}</td>
            </tr>
            {% endfor %}
        </table>
    </div>

    <div id="section8" class="section">
        <h2>高亮内容</h2>
        <p class="highlight">{{ highlight_content }}</p>
    </div>

    <div id="section9" class="section">
        <h2>图片展示</h2>
        {% for image in images %}
            <!-- <div class="image-container"> -->
            <div style="text-align: center; margin-bottom: 10px;">
                <img src="{{ image.src }}" alt="{{ image.alt }}" style="width: 200px; height: auto;">
                <p>{{ image.caption }}</p>
            </div>
        {% endfor %}
    </div>

    <div id="section10" class="section">
        <h2>联系信息</h2>
        {% if contact %}
            <p>联系人：{{ contact.name }}</p>
            <p>电话：{{ contact.phone }}</p>
            <p>邮箱：{{ contact.email }}</p>
        {% else %}
            <p>暂无联系信息。</p>
        {% endif %}
    </div>
{% endblock %}