{% extends "web/_file_base.html" %}
{% block file_contents %}
    <div class="log-file-contents">
        {% 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"
                         id="L{{ section.start_line }}{{ suffix }}-section">
                    <summary class="d-flex flex-nowrap align-items-start"
                             style="cursor:pointer;
                                    font-family:monospace">
                        <span class="me-2 file_contents_lineno m-0 p-0 ms-4"
                              style="display:inline-block;
                                     white-space:pre"></span>
                        <span class="me-2 file_contents_lineno"
                              style="display:inline-block;
                                     vertical-align:top"></span>
                        <span class="log-section-title">{{ section.title }}</span>
                    </summary>
                    {{ section.content }}
                </details>
            {% else %}
                {{ section.content }}
            {% endif %}
        {% endfor %}
    </div>
    <script>
    document.addEventListener("click", function (event) {
        // Search for a link such as <a href="#L454-section">...<\/a>
        const link = event.target.closest && event.target.closest('a[href^="#L"][href$="-section"]');
        if (!link) {
            return;
        }

        const id = link.getAttribute("href").slice(1);  // e.g. "L454-section"
        const detailsEl = document.getElementById(id);

        if (detailsEl instanceof HTMLDetailsElement) {
            detailsEl.open = true;
        }
    });
    </script>
{% endblock %}