{# Rolling frame log — swap target for both the manual Refresh
   button and the auto-poll trigger. Newest first. #}
<div id="openlcb-monitor">
  {% if not frames %}
  <p class="muted">No frames captured yet. Anything on the bus will
  appear here.</p>
  {% else %}
  <table class="cv-variables" style="width:100%">
    <thead>
      <tr>
        <th style="width:10em">Time</th>
        <th style="width:5em">Src</th>
        <th style="width:4em">Type</th>
        <th>Summary</th>
        <th style="width:14em">Data</th>
        <th style="width:5em"></th>
      </tr>
    </thead>
    <tbody>
      {% for f in frames %}
      <tr class="openlcb-frame-row"
          onclick="olcbToggleDetails(this)"
          style="cursor:pointer"
          title="Click to expand decoded fields">
        <td class="mono small" title="UTC — raw epoch: {{ '%.3f' | format(f.timestamp) }}">
          {{ f.time_str }}
        </td>
        <td class="mono">
          <a href="/openlcb/nodes/{{ f.source_alias }}"
             onclick="event.stopPropagation()">{{ f.source_alias }}</a>
          {# Filter-to-this-alias affordance: sets the src filter to
             this row's alias + triggers the filter form's input
             event so htmx re-fetches. Kept small + inline so it
             sits next to the alias without visual noise. #}
          <a href="#" class="small muted"
             data-alias="{{ f.source_alias }}"
             onclick="event.stopPropagation(); olcbFilterToAlias(event, this)"
             title="Filter the monitor to this alias only">
            [only]
          </a>
          {% if f.is_us %}<span class="badge" title="This node emitted the frame">us</span>{% endif %}
        </td>
        <td class="mono small">{{ '%#x' | format(f.frame_type) }}</td>
        <td class="small">{{ f.summary }}</td>
        <td class="mono small">{{ f.data_hex or '(empty)' }}</td>
        <td>
          {# Replay: reuses olcbFillFrame() from the send-form
             preset buttons. data-header/data-body match the
             preset button convention, so one JS function serves
             both. #}
          <button type="button"
                  class="small"
                  data-header="{{ f.header }}"
                  data-body="{{ f.data_hex }}"
                  title="Load this frame into the Send form above"
                  onclick="event.stopPropagation(); olcbFillFrame(this); document.getElementById('openlcb-send-form').scrollIntoView({behavior:'smooth', block:'center'});">
            Replay
          </button>
        </td>
      </tr>
      {% if f.details %}
      <tr class="openlcb-frame-details" style="display:none">
        <td colspan="6" class="small" style="padding-left:2em;background:var(--bg-alt,#f7f7f7)">
          <div class="row" style="gap:1.5rem;flex-wrap:wrap">
            <div><span class="muted">Kind:</span>
                 <code>{{ f.details.kind }}</code></div>
            <div><span class="muted">Header:</span>
                 <code>{{ f.details.header }}</code></div>
            <div><span class="muted">Source:</span>
                 <code>{{ f.details.source_alias }}</code></div>
            {% if f.details.mti_hex %}
            <div><span class="muted">MTI:</span>
                 <code>{{ f.details.mti_hex }}</code>
                 <span class="muted">({{ f.details.mti_name }})</span></div>
            {% endif %}
            {% if f.details.dest_alias %}
            <div><span class="muted">Dest:</span>
                 <code>{{ f.details.dest_alias }}</code></div>
            {% endif %}
            {% if f.details.control_name %}
            <div><span class="muted">Control:</span>
                 <code>{{ f.details.variable_field }}</code>
                 <span class="muted">({{ f.details.control_name }})</span></div>
            {% endif %}
            {% if f.details.cid_seq %}
            <div><span class="muted">CID seq:</span>
                 {{ f.details.cid_seq }}</div>
            <div><span class="muted">NID slice:</span>
                 <code>{{ f.details.nid_slice }}</code></div>
            {% endif %}
            {% if f.details.node_id %}
            <div><span class="muted">Node ID:</span>
                 <code>{{ f.details.node_id }}</code></div>
            {% endif %}
            {% if f.details.event_id %}
            <div><span class="muted">Event:</span>
                 <code>{{ f.details.event_id }}</code>
                 {% if f.details.event_name %}
                 <span class="muted">({{ f.details.event_name }})</span>
                 {% endif %}
            </div>
            {% endif %}
            {% if f.details.dest_stream_id %}
            <div><span class="muted">Stream ID (dest):</span>
                 <code>{{ f.details.dest_stream_id }}</code></div>
            {% endif %}
            <div class="mono small" style="flex-basis:100%">
              <span class="muted">Data:</span>
              {{ f.details.data_hex or '(empty)' }}
            </div>
          </div>
        </td>
      </tr>
      {% endif %}
      {% endfor %}
    </tbody>
  </table>
  {% endif %}
</div>