{#
  Runners card. Same <dl> grammar as Host/VMware/Cargo cache -- see the note
  in vmware.html. Unit name is the <dt>, the status badge plus its sub-state
  share one <dd>.
#}
<div class="contents" id="runners-partial" hx-get="/runners" hx-trigger="every 5s, ci:refresh from:body" hx-swap="outerHTML">
  <section class="card" id="runner-card">
    <h2><svg class="icon" aria-hidden="true"><use href="#i-gear"></use></svg>Runners</h2>
    {% if runners %}
    <dl>
      {% for runner in runners %}
      <dt>{{ runner.name }}</dt>
      <dd>
        {% if runner.active %}
        <span class="badge badge-success"><svg class="icon" aria-hidden="true"><use href="#i-check"></use></svg>active</span>
        {% else %}
        <span class="badge badge-danger"><svg class="icon" aria-hidden="true"><use href="#i-alert"></use></svg>down</span>
        {% endif %}
        <span class="text-dim">{{ runner.sub_state }}</span>
      </dd>
      {% endfor %}
    </dl>
    {% else %}
    <p class="notice notice-warn" role="alert">Runner status unavailable.</p>
    {% endif %}
  </section>
</div>