{#- The System pages' band (ADR-0100): one heading and two views of it, as a node's
    views are tabs beneath its title (ADR-0097 decision 3). **Running** is what the
    process is doing now, and the one of the two the poll refreshes, so the stamp
    that dates it stands at the right of the heading there and nowhere else — there
    must be exactly one `#status-updated` on a page, because that is what the poller
    looks for, and under the kiosk layout the slim line already carries it.
    **Installed** is what the installation settled at startup and cannot change
    while the process runs.

    Context: ``system_view`` (``running`` or ``installed``), ``version``, and on
    Running ``rendered_at``. -#}
<div class="ls-band">
    <div class="ls-band__row">
        <h1 class="ls-band__title">System <span class="text-muted small fw-normal">· little-sister {{ version }}</span></h1>
        {%- if system_view == 'running' and layout != 'kiosk' %}
        <div class="ls-band__meta">
            <div class="text-muted ls-band__updated" id="status-updated"
                 data-rendered-at="{{ rendered_at }}">updated {{ rendered_at }}</div>
        </div>
        {%- endif %}
    </div>
    <nav class="ls-views" aria-label="Views of this instance">
        {%- for label, href, name in (('Running', url_for('system'), 'running'),
                                      ('Installed', url_for('system_installed'), 'installed')) %}
        <a class="ls-views__tab{% if name == system_view %} is-current{% endif %}" href="{{ href }}"{% if name == system_view %} aria-current="page"{% endif %}>{{ label }}</a>
        {%- endfor %}
    </nav>
</div>