{% extends 'base_template.html' %}
{% import "_macros.html" as macros %}

{# SD-752 phases 1 + 2.

   Each chapter exposes a uniform shape:
       {"name": str,
        "narrative": list[str],
        "tables": list[dict],
        "diagram_placeholder": str | None,
        "diagram_data_uri": str | None,
        "diagram_caption": str | None,
        "diagram_legend": [{"icon_uri": str, "label": str}, ...]}
   ``diagram_data_uri`` is a base64-encoded PNG produced by netwlens.
   When present it renders as an inline <img> followed by the icon
   legend (filtered to types present on the diagram) and a one-line
   caption explaining the ▶/arrowhead convention. ``diagram_placeholder``
   is the fallback when the render failed.
#}

{% block content %}
<div class="container">
    {{ macros.report_introduction(report_details) }}

    {{ macros.standard_summary_section(network_summary, site_summary, site_filter) }}

    {% for chapter in chapters %}
        {{ macros.section_title(chapter.name, loop.index, site_filter) }}

        <div class="section-2">
            {% for paragraph in chapter.narrative %}
                <p>{{ paragraph }}</p>
            {% endfor %}
        </div>

        {% if chapter.diagram_data_uri %}
            {% if chapter.diagram_source_note %}
                <p class="topology-source-note">{{ chapter.diagram_source_note }}</p>
            {% endif %}
            <div class="section-2">
                <img src="{{ chapter.diagram_data_uri }}"
                     class="topology-diagram"
                     alt="{{ chapter.name }} site topology">
            </div>
            {% if chapter.diagram_caption %}
                <p class="topology-caption">{{ chapter.diagram_caption }}</p>
            {% endif %}
        {% elif chapter.diagram_placeholder %}
            <div class="section-2">
                <p><em>{{ chapter.diagram_placeholder }}</em></p>
            </div>
        {% endif %}

        {% if chapter.tables %}
            {% for table in chapter.tables %}
                {% if table.heading %}
                    <h3 class="main-titles">{{ table.heading }}</h3>
                {% endif %}
                {% if table.rows %}
                    <table class="table-spacing dense-table">
                        {% if table.columns %}
                        <thead>
                            <tr>
                                {% for column in table.columns %}
                                    <th class="table-cell-width-even">{{ column }}</th>
                                {% endfor %}
                            </tr>
                        </thead>
                        {% endif %}
                        <tbody>
                            {% for row in table.rows %}
                                <tr>
                                    {% for cell in row %}
                                        <td>{{ cell }}</td>
                                    {% endfor %}
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                {% else %}
                    <p><em>{{ table.empty_message or "Not present at this site." }}</em></p>
                {% endif %}
            {% endfor %}
        {% endif %}

        {% if chapter.diagram_legend %}
            <div class="topology-legend">
                {% for entry in chapter.diagram_legend %}
                    <span class="topology-legend-item">
                        <img src="{{ entry.icon_uri }}" alt="">
                        {{ entry.label }}
                    </span>
                {% endfor %}
            </div>
        {% endif %}
    {% endfor %}
</div>
{% endblock %}