{% comment %} One section of the diagnostics page: the table of rows
drawing one y quantity, under a header saying what that quantity is.

A partial because a section arrives two ways and must be the same thing
either way: the page includes one per quantity the URL names, and the y
selector fetches one from the section route to append to a page already
built.

A plain header rather than <details>/<summary>: the header carries
controls, and clicking one of those must not collapse the section.

Takes one context variable, `section`, as `build_section` returns it.
{% endcomment %}
<div class="diagnostics-section"
     id="section:{{ section.quantity.name }}"
     data-quantity="{{ section.quantity.name }}"
     data-marker="{{ section.marker }}">
    {% comment %} The library's own grouping element, running down the
       side of everything the section holds, so that where one section
       ends and the next begins is visible rather than inferred from the
       headers. It shrinks with the section when that is collapsed, which
       is also what makes it worth clicking: its height says how much is
       showing, and clicking it collapses or expands the section as the
       header does.
    {% endcomment %}
    <div class="lcars-bracket left section-bracket"
         title="Collapse or expand this section"></div>
    <div class="section-content">
        {% comment %} The whole header collapses and expands the section,
           as the bracket beside it does: neither has anything else to do,
           and there is no reason to make anyone aim. The header's one
           control, remove, stops the click from reaching it. Whether a
           section is open is left to the bracket's own height rather than
           said again by a glyph. {% endcomment %}
        {% comment %} Built as the page's own title bar is -- a golden bar
           carrying a black-backed title, closed by a rounded end -- so
           that a section reads as a heading of the same kind rather than
           as something this page invented. {% endcomment %}
        <div class="section-header" title="Collapse or expand this section">
            <div class="lcars-bar horizontal lcars-golden-tanoi-bg section-bar">
                <span class="lcars-title section-name">{{ section.quantity.name }}</span>
                {% comment %} Display only: it says what this section's
                   rows are drawn with before anyone edits them, which is
                   how the quantities on one plot are told apart.
                {% endcomment %}
                <span class="section-marker">
                    {% include "core/plot_marker.html" with symb=section.marker size="20" svg="T" %}
                </span>
                {% if section.quantity.expression %}
                <code class="section-expression">{{ section.quantity.expression }}</code>
                {% endif %}
                <span class="section-description">{{ section.quantity.description }}</span>
                {% comment %} Which y axis this section's quantity is
                   drawn against. Sharing is the default because two
                   quantities wrongly sharing one show it at once -- one
                   is flattened -- where two wrongly separated are each
                   rescaled to fill the height and look comparable when
                   they are not. The options are rebuilt by the client as
                   sections come and go. {% endcomment %}
                <label class="section-axis">y axis
                    <select class="axis-select">
                        <option value="1" selected>1</option>
                    </select>
                </label>
                {% comment %} How many of this section's rows reach the
                   plot, kept current by the client: a collapsed section
                   still says how much of what is drawn came from it.
                {% endcomment %}
                <span class="section-drawn">{{ section.diagnostics_list|length }}</span>
                <button type="button"
                        class="remove-section"
                        title="Remove this section">&times;</button>
            </div>
            <div class="lcars-bar horizontal right-end decorated"></div>
        </div>
        <div class="section-body">
            {% comment %} "asc": first click sorts ascending, which the
               library does not default to.  A first click that jumps to
               descending reads as the table having been shuffled rather
               than ordered. {% endcomment %}
            <table class="lcars-table standard-header sortable asc">
                <thead>
                    <tr>
                        {% comment %} The two button columns, headed by
                           nothing: what they do is on the buttons
                           themselves. {% endcomment %}
                        <th class="no-sort"></th>
                        <th class="no-sort"></th>
                        <th class="no-sort">Color</th>
                        <th class="no-sort">Style</th>
                        <th class="no-sort">Scale</th>
                        <th class="no-sort">Label</th>
                        {% comment %} All sortable, the dropdown columns
                           included: each of those cells carries a
                           `data-sort` holding the text of its selected
                           option, so it sorts by what it shows rather
                           than by the run-together text of the dropdown.
                           Each section sorts on its own, the library
                           installing one listener on the document and
                           needing no initialization, so a table appended
                           later sorts like the rest. {% endcomment %}
                        {% for field in section.diagnostics_fields %}
                        <th>{{ field }}</th>
                        {% endfor %}
                    </tr>
                </thead>
                <tbody class="lcars-table select-row">
                    {% for diagnostic in section.diagnostics_list %}
                    {% include "diagnostics/_series_row.html" %}
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>