{% extends "web/_file_base.html" %}
{% block formatted_content %}
    {% for section in sections %}
        {% if section.title %}
            {#This section has a title: can be collapsed#}
            <details {% if section.expanded %}open{% endif %} class="m-0 p-0">
                <summary id="L{{ section.start_line }}{{ suffix }}-section"
                         class="d-flex flex-nowrap align-items-start"
                         style="cursor:pointer;
                                font-family:monospace">
                    <span class="me-2 formatted-content-lineno m-0 p-0 ms-4"
                          style="display:inline-block;
                                 white-space:pre"></span>
                    <span class="me-2 formatted-content-lineno"
                          style="display:inline-block;
                                 vertical-align:top"></span>
                    <span class="log-section-title">
                        <span class="log-section-label">{{ section.title }}</span>
                    </span>
                </summary>
                <pre class="formatted-content"
                     style="--file-lineno-width: {{ file_lineno_width }}em">{{ section.content }}</pre>
            </details>
        {% else %}
            <pre class="formatted-content"
                 style="--file-lineno-width: {{ file_lineno_width }}em">{{ section.content }}</pre>
        {% endif %}
    {% endfor %}
    <script>
    function openSectionFromHash(hash) {
        if (!hash || !hash.startsWith("#L") || !hash.endsWith("-section")) {
            return;
        }

        const id = hash.slice(1);

        const summaryElement = document.getElementById(id);
        const detailsElement = summaryElement?.closest("details");

        if (detailsElement instanceof HTMLDetailsElement) {
            detailsElement.open = true;
        }
    }

    // Initial page load
    document.addEventListener("DOMContentLoaded", function () {
        openSectionFromHash(window.location.hash);
    });

    // Hash changes (back/forward navigation, JS updates, etc.)
    window.addEventListener("hashchange", function () {
        openSectionFromHash(window.location.hash);
    });

    // Links to the section
    document.addEventListener("click", function (event) {
        const link = event.target.closest?.('a[href^="#L"][href$="-section"]');
        if (!link) {
            return;
        }

        openSectionFromHash(link.getAttribute("href"));
    });
    </script>
{% endblock %}