{# Bus health snapshot — auto-refreshed every 10s. Whole card is
   the swap target (id=openlcb-health) so both label + counts flip
   in one atomic swap. When health is None (non-OpenLCB connection
   or a fetch error) the fragment renders empty. #}
<div id="openlcb-health">
  {% if health %}
  <div class="card">
    <h3 style="margin-top:0">Bus health</h3>
    <div class="row" style="gap:1.5rem;flex-wrap:wrap">
      <div>
        <div class="muted small">Nodes</div>
        <div class="mono"><strong>{{ health.total_nodes }}</strong></div>
      </div>
      <div>
        <div class="muted small">Identified (NID)</div>
        <div class="mono">{{ health.identified }}/{{ health.total_nodes }}</div>
      </div>
      <div>
        <div class="muted small">SNIP cached</div>
        <div class="mono">{{ health.with_snip }}/{{ health.total_nodes }}</div>
      </div>
      <div>
        <div class="muted small">PIP cached</div>
        <div class="mono">{{ health.with_pip }}/{{ health.total_nodes }}</div>
      </div>
      <div>
        <div class="muted small"
             title="Peers silent longer than {{ '%.0f' | format(health.quiet_threshold_seconds) }} seconds">
          Quiet
        </div>
        <div class="mono">{{ health.quiet_count }}</div>
      </div>
      <div>
        <div class="muted small">Longest silence</div>
        <div class="mono">
          {% if health.oldest_silence_seconds is none %}
            &mdash;
          {% elif health.oldest_silence_seconds < 60 %}
            {{ '%.0f' | format(health.oldest_silence_seconds) }}s
          {% elif health.oldest_silence_seconds < 3600 %}
            {{ '%.0f' | format(health.oldest_silence_seconds / 60) }}m
          {% else %}
            {{ '%.1f' | format(health.oldest_silence_seconds / 3600) }}h
          {% endif %}
        </div>
      </div>
    </div>
  </div>
  {% endif %}
</div>