{% extends "web/_file_base.html" %}
{% block file_contents %}
    <style>
    .log-section-title {
        display: inline-block;
        font-family: monospace;
        font-weight: bold;
        color: rgb(102, 255, 102);
    }
    {#Arrow to expand/collapse a section#}
    .log-section-title::before {
        content: "▸";
        display: inline-block;
        margin-right: 0.4em;
        transform: rotate(0deg);
        transition: transform 0.15s ease-in-out;
        color: rgb(102, 255, 102);
    }

    details[open] .log-section-title::before {
        transform: rotate(90deg);
    }

    {#Only one horizontal scrollbar for all the sections#}
    .single-horizontal-bar {
        overflow-x: auto;
        width: 100%;
    }
    {#The horizontal scrollbar is the widest of the possible scrollbars#}
    .single-horizontal-bar .d-flex {
        min-width: max-content;
    }
    </style>
    <div class="single-horizontal-bar">
        {% 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 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"
                              style="display:inline-block;
                                     white-space:pre">&nbsp;</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>
                    {% include "web/_file_linenumbers_content.html" with linenumbers=section.linenumbers content=section.content only %}
                </details>
            {% else %}
                {% include "web/_file_linenumbers_content.html" with linenumbers=section.linenumbers content=section.content only %}
            {% endif %}
        {% endfor %}
    </div>
{% endblock %}