{# Health-check result fragment. Swapped in place of itself by the
   Health check button, so a second click replaces the previous
   result rather than piling up. #}
<div id="openlcb-node-health" style="margin-top:0.5rem">
  <div class="row" style="gap:1rem;align-items:center;flex-wrap:wrap">
    <strong>
      Status:
      {% if health.status == "healthy" %}
        <span style="color:var(--ok,#3a3)">healthy</span>
      {% elif health.status == "slow" %}
        <span style="color:var(--warn,#c93)">slow</span>
      {% elif health.status == "partial" %}
        <span style="color:var(--warn,#c93)">partial</span>
      {% else %}
        <span style="color:var(--err,#c33)">unresponsive</span>
      {% endif %}
    </strong>
    <div class="mono small">
      Verify NID:
      {% if health.verify_ms is none %}
        <span class="muted">timeout</span>
      {% else %}
        {{ '%.0f' | format(health.verify_ms) }}ms
      {% endif %}
    </div>
    <div class="mono small">
      PIP:
      {% if health.pip_ms is none %}
        <span class="muted">timeout</span>
      {% else %}
        {{ '%.0f' | format(health.pip_ms) }}ms
      {% endif %}
    </div>
    <div class="mono small">
      SNIP:
      {% if health.snip_ms is none %}
        <span class="muted">timeout</span>
      {% else %}
        {{ '%.0f' | format(health.snip_ms) }}ms
      {% endif %}
    </div>
    {% if alias %}
    <button type="button" class="small"
            hx-post="/openlcb/nodes/{{ alias }}/health"
            hx-target="#openlcb-node-health" hx-swap="outerHTML"
            title="Re-run the health probe against this peer">
      Retry
    </button>
    {% endif %}
  </div>
</div>