{#
  The machine strip. Rendered on its own so it can be replaced whole without
  touching the rest of the page: the /events stream pushes this fragment as
  its named "machine" event and the sse-swap below swaps it in, where an
  hx-get timer used to poll for the same markup every five seconds.

  Everything here is set in mono with tabular figures, so a number changing
  does not make the row jump.
#}
{% import "_macros.html" as m %}

<header class="machine" id="machine-strip"
        sse-swap="machine" hx-swap="outerHTML"
        aria-label="Machine status">

  <span class="machine__host" title="{{ machine.os }}">{{ machine.hostname }}</span>

  {{ m.stat("up", machine.uptime) }}

  <span class="machine__metric" title="Load average over 1, 5 and 15 minutes">
    <span class="label">load</span>
    {# data-metric lets panel.js refresh this figure from the 2-second metrics
       snapshot between the 5-second strip swaps. #}
    <span class="num" data-metric="load.1m">{{ "%.2f" | format(machine.load[0]) }}</span>
    {# A sparkline shows the shape of the last few minutes, which a single
       number cannot. #}
    <svg class="machine__spark" viewBox="0 0 80 18" preserveAspectRatio="none"
         role="img" aria-label="Load over the last few minutes">
      <polyline fill="none" stroke="currentColor" stroke-width="1.2"
                points="{{ machine.load_history_points }}"/>
    </svg>
  </span>

  {{ m.capacity("mem", machine.memory_used, machine.memory_total,
                machine.memory_used_human, machine.memory_total_human) }}
  {{ m.capacity("disk", machine.disk_used, machine.disk_total,
                machine.disk_used_human, machine.disk_total_human) }}

  <span class="machine__tally">
    {% if machine.units_failed %}
      <span class="badge badge--failed">{{ machine.units_failed }} failed</span>
    {% endif %}
    {% if machine.units_busy %}
      <span class="badge badge--busy">{{ machine.units_busy }} working</span>
    {% endif %}
    <span class="badge badge--active">{{ machine.units_active }} running</span>
  </span>
</header>