{# Bus stats fragment — headline count + top talkers + top categories.
   Swapped by htmx alongside the frame log on refresh. #}
<div id="openlcb-stats">
  {% if not stats or stats.total_frames == 0 %}
  <p class="muted small">Waiting for traffic — stats appear once frames land in the buffer.</p>
  {% else %}
  <div class="row" style="gap:1.5rem;align-items:flex-start">
    <div style="flex:0 0 auto">
      <div><strong>{{ stats.total_frames }}</strong> frames buffered</div>
      <div class="muted small">span {{ '%.2f' | format(stats.span_seconds) }}s</div>
    </div>
    <div style="flex:1">
      <strong>Top talkers</strong>
      <table class="cv-variables" style="width:100%">
        <tbody>
          {% for row in stats.top_talkers %}
          <tr>
            <td class="mono" style="width:6em">{{ row.alias }}</td>
            <td class="mono small">{{ row.count }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    <div style="flex:1">
      <strong>Frame kinds</strong>
      <table class="cv-variables" style="width:100%">
        <tbody>
          {% for row in stats.top_categories %}
          <tr>
            <td class="small">{{ row.category }}</td>
            <td class="mono small" style="width:5em">{{ row.count }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% if stats.top_events %}
    <div style="flex:1.2">
      <strong>Top events (PCER)</strong>
      <table class="cv-variables" style="width:100%">
        <tbody>
          {% for row in stats.top_events %}
          <tr>
            <td class="mono small">
              {{ row.event }}
              {% if row.name %}
              <div class="muted small">{{ row.name }}</div>
              {% endif %}
            </td>
            <td class="mono small" style="width:5em">{{ row.count }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% endif %}
  </div>
  {% endif %}
</div>