{#- The page band: what used to be a title row, a loose
    about paragraph and a freshness caption stacked down the page, gathered into
    one aligned block — breadcrumb/title on the left, the updated-line and the
    filters on the right, the node's about beneath.

    The freshness line is not chrome. It is the ADR-0005 promise that the page
    dates its own data, so it reads as a measurement: tabular figures so the
    digits do not dance on each poll, and a rule separating it from the controls
    it is not one of. It keeps `id="status-updated"`, its server-seeded
    `data-rendered-at`, and the `text-muted` class **poll.js swaps for
    `text-danger`** — that swap is why nothing here may set a `color` on it
    (both Bootstrap utilities are `!important`; a color of our own would be
    beaten by them and a stale line could read muted instead of red).

    `band_stamp` and `band_filters` say which parts this page has: the dashboard
    takes both, a detail page neither. They default to off — the Jinja env is
    StrictUndefined, so a page that wants a part has to say so. -#}
{%- set band_stamp = band_stamp | default(false) -%}
{%- set band_filters = band_filters | default(false) -%}
{#- The kiosk has no band: its slim line already carries the sentence, the stamp
    and the exit, and a wall display has no use for a title or for filters it
    cannot be clicked. The stamp lives in that line instead, so there is still
    exactly one of it on the page. -#}
{%- if layout != 'kiosk' %}
<div class="ls-band">
    <div class="ls-band__row">
        <h1 class="ls-band__title">
            {% include '_breadcrumb.html' %}
            {#- The title is dropped where it only repeats the last crumb beside
                it (`titles.py`) — the band would otherwise read
                "… / critical  Critical". -#}
            {%- set shown = (node | node_title) if node else '' %}
            {%- if shown %}
            <span class="node-title node-title--header">{{ shown | markdown_inline }}</span>
            {%- endif %}
        </h1>
        {%- if band_stamp or band_filters %}
        <div class="ls-band__meta">
            {%- if band_stamp %}
            <div class="text-muted ls-band__updated" id="status-updated"
                 data-rendered-at="{{ rendered_at }}">updated {{ rendered_at }}</div>
            {%- endif %}
            {%- if band_filters %}
            <form method="get" class="status-filters mb-0"
                  action="{{ url_for('status', branch=branch) if branch else url_for('status') }}">
                {# A form submit carries this marker, so an unchecked switch (which
                   sends nothing) is told apart from a fresh visit — lets the switches
                   persist and a default-on switch turn off. #}
                <input type="hidden" name="view" value="1">
                {#- Each control below carries `data-ls-submit`: prefs.js submits this
                    form when one changes, so a switch needs no Apply. It was an
                    `onchange` attribute on every input until a Content-Security-Policy
                    made inline handlers the thing worth removing (ADR-0048); the
                    <noscript> button at the end is what a JS-less browser applies a
                    choice with, as in the settings menu. -#}
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" role="switch"
                           id="hide_ok" name="hide_ok" value="1"
                           {% if hide_ok %}checked{% endif %} data-ls-submit>
                    <label class="form-check-label" for="hide_ok">hide ok</label>
                </div>
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" role="switch"
                           id="hide_idle" name="hide_idle" value="1"
                           {% if hide_idle %}checked{% endif %} data-ls-submit>
                    <label class="form-check-label" for="hide_idle">hide idle</label>
                </div>
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" role="switch"
                           id="dense" name="dense" value="1"
                           {% if dense %}checked{% endif %} data-ls-submit>
                    <label class="form-check-label" for="dense">chips</label>
                </div>
                <div class="status-filters__depth">
                    <label class="form-check-label" for="depth">depth</label>
                    <input class="form-control form-control-sm status-depth"
                           type="number" id="depth" name="depth"
                           min="0" max="{{ depth_limit }}" value="{{ max_depth }}"
                           data-ls-submit>
                </div>
                <noscript>
                    <button class="btn btn-sm btn-primary" type="submit">Apply</button>
                </noscript>
            </form>
            {%- endif %}
        </div>
        {%- endif %}
    </div>
    {#- What the node is, said once and folded, on every view of it: a line that
        names it and shows how it begins, cut off where the width runs out, and
        opened, the text at a reading measure beneath, the preview giving way to it.
        It was said here in full and again as *About:* in a leaf's status card, so
        the instance's own nodes, whose `about` is a paragraph, pushed their report
        down by twice its length. The preview is for the eye alone: a screen reader
        hears *about*, and opened, the text, never the same words twice. -#}
    {%- if node and node.about %}
    {%- set about_html = node.about | markdown %}
    <details class="ls-band__about">
        <summary><span class="ls-band__about-label">about</span> <span class="ls-band__about-preview" aria-hidden="true">{{ about_html | striptags }}</span></summary>
        <div class="ls-band__about-body md-body">{{ about_html }}</div>
    </details>
    {%- endif %}
    {#- A node's views (ADR-0097 decision 3): its status, its series, its history
        and its Copy document, each a route of its own addressed by the node's path.
        Series stands where a curve can stand at or beneath the node, as the
        configuration says (`series_tab`), so it does not come and go with the
        readings, and carries the number of curves its view draws, none where it
        draws none (ADR-0114 decision 3) — a number that moves with what is declared
        and what the tree holds, not with a reading; History on every node but the
        root, which declares nothing of its own and has no periods; Copy on every
        node and on the root, whose Copy is the tree's document (ADR-0115 decision
        7) — last, since it hands over what the others show. They close the band,
        beneath what the node is about, so the band's rule is their track: the views
        are of what lies below it. -#}
    {%- if view is defined %}
    {%- set tabs = [('Status', url_for('status', branch=branch) if branch
                     else url_for('status'), 'status', 0)] %}
    {%- if series_tab | default(false) %}
    {%- set tabs = tabs + [('Series', url_for('series', path=branch) if branch
                            else url_for('series_index'), 'series',
                            series_count | default(0))] %}
    {%- endif %}
    {%- if branch %}
    {%- set tabs = tabs + [('History', url_for('history', path=branch), 'history', 0)] %}
    {%- endif %}
    {%- set tabs = tabs + [('Copy', url_for('copy', branch=branch) if branch
                            else url_for('copy'), 'copy', 0)] %}
    <nav class="ls-views" aria-label="Views of this node">
        {%- for label, href, name, count in tabs %}
        <a class="ls-views__tab{% if name == view %} is-current{% endif %}" href="{{ href }}"{% if name == view %} aria-current="page"{% endif %}>{{ label }}{% if count %} <span class="ls-views__count">{{ count }}</span><span class="visually-hidden"> {{ "curve" if count == 1 else "curves" }}</span>{% endif %}</a>
        {%- endfor %}
    </nav>
    {%- endif %}
</div>
{%- endif %}