{#- ═══════════════════════════════════════════════════════
    Shared fragments, in the service's own vocabulary.

    Every one of these obeys the two disciplines that get broken
    by reflex: nothing is enclosed in a border or a box, and every
    bar is drawn at the one shared width so any two percentages in
    the service compare directly.
    ═══════════════════════════════════════════════════════ -#}

{#- A degraded service. Teletext's failure was a page that did not
    arrive, said in red where the content should have been — not a
    panel with an icon and a left border. -#}
{% macro service_error(name, raw) %}
  <div class="tt-err" role="alert">
    <div class="tt-err-cause">{{ raw | friendly_error(name) }}</div>
    {% if raw %}
    <details>
      <summary>Technical detail</summary>
      <pre>{{ raw | redact_secrets }}</pre>
    </details>
    {% endif %}
  </div>
{% endmacro %}


{#- THE ONE RULER. Every bar in the service is drawn here and
    nowhere else, at --bar-cells wide, filled in whole cells. Pass a
    percentage; the macro rounds it to cells so a bar never ends
    mid-character. `tone` picks the colour by threshold. -#}
{% macro bar(pct, tone='') %}
  {%- set p = [[pct | float(0), 0] | max, 100] | min -%}
  {%- set cells = 20 -%}
  {%- set filled = ((p / 100) * cells) | round(0, 'common') | int -%}
  {%- set cls = tone if tone else ('alert' if p >= 90 else ('warn' if p >= 75 else 'ok')) -%}
  <span class="tt-bar {{ cls }}" role="img"
        aria-label="{{ p | round | int }} percent"><i style="width: {{ (filled / cells * 100) | round(2) }}%"></i></span>
{% endmacro %}


{#- Direction of travel. Only ever called where the backend really
    carries a comparison — never to decorate a number that has no
    history behind it. -#}
{% macro trend(now, reference, unit='') %}
  {%- if now is not none and reference is not none and reference > 0 -%}
    {%- set delta = ((now - reference) / reference) * 100 -%}
    {%- if delta > 12 -%}
      <span class="tt-trend up" title="Above the 7-day average">&#9650;</span>
    {%- elif delta < -12 -%}
      <span class="tt-trend down" title="Below the 7-day average">&#9660;</span>
    {%- else -%}
      <span class="tt-trend flat" title="At the 7-day average">&#9644;</span>
    {%- endif -%}
  {%- endif -%}
{% endmacro %}


{#- Disk temperature / spin state. A spun-down disk reports no usable
    temperature, so Standby replaces the reading rather than showing a
    stale or zero degree value. Colour carries the state; there is no
    badge shape to put it in. -#}
{% macro disk_state(dk) %}
  {%- if dk.spinning == false -%}
    <span class="tt-row-val off">STANDBY</span>
  {%- elif dk.temp is not none -%}
    <span class="tt-row-val {% if dk.temp >= 55 %}alert{% elif dk.temp >= 45 %}warn{% else %}ok{% endif %}">{{ dk.temp }}&deg;C</span>
  {%- else -%}
    <span class="tt-row-val off">&mdash;</span>
  {%- endif -%}
{% endmacro %}


{#- A title tile. Artwork is the only thing in this world not made of
    characters, so it sits as a flat rectangle on the grid with its
    label below — no frame, no rounding, no shadow. -#}
{% macro tile(title, sub, poster, badge='', action='', target='') %}
  <div class="tt-tile">
    {% if poster %}
      <img class="tt-tile-art" src="{{ poster }}" alt="" loading="lazy">
    {% else %}
      <span class="tt-tile-art tt-tile-art-empty" aria-hidden="true"></span>
    {% endif %}
    <span class="tt-tile-t">{{ title }}</span>
    {% if sub or badge %}
    <span class="tt-tile-s">
      {%- if badge %}<span class="tt-tile-badge">{{ badge }}</span>{% endif %}
      {%- if badge and sub %} {% endif %}{{ sub }}</span>
    {% endif %}
    {% if action %}
    <span class="tt-tile-p">
      <button class="tt-btn tt-btn-sm" data-title="{{ title }}" data-target="{{ target }}"
              onclick="armAdd(this)">{{ action }}</button>
    </span>
    {% endif %}
  </div>
{% endmacro %}


{#- A list row: number, name, body, value. The index rows and every
    listing in the service share this one shape. -#}
{% macro row(name, title, sub='', value='', tone='') %}
  <div class="tt-row">
    {% if name %}<span class="tt-row-name">{{ name }}</span>{% endif %}
    <span class="tt-row-body">
      <span class="tt-row-title">{{ title }}</span>
      {% if sub %}<span class="tt-row-sub">{{ sub }}</span>{% endif %}
    </span>
    {% if value %}<span class="tt-row-val {{ tone }}">{{ value }}</span>{% endif %}
  </div>
{% endmacro %}