{#
  Executions card. Replaces the old "Live VMs" table: one row per recent Gitea
  Actions run (the live ones included), with the build VM(s) that run spawned
  grouped into its VM cell, Remove action and all.

  Every fact gets its own column -- no cell stacks two data points with
  <br> (Run/Repo, Branch/Commit, Trigger/Actor, Duration/Started, VM/IP are
  each a pair that used to share one cell on two lines). A wide table is the
  accepted cost here: the card is already `.card--wide` and its own
  `.table-wrap` scrolls horizontally rather than the page.

  Degraded states (no token, expired token, Gitea unreachable) render a notice
  and still list every running VM below, so this card is never less useful
  than the VM table it replaces. Orphan VMs are NOT handled here: the sweep
  lives in the Maintenance card (Stage F retired the status-header VMs tile
  that carried the count);
  ``executions.unmatched_vms`` only exists so a powered-on VM whose run has
  scrolled out of the window (or that no run ever claimed) keeps its row and
  its Remove button.

  The row-count selector sits in the card's own header bar (right end) and
  re-fetches the card with ``?limit=N``; the card it renders carries that same
  limit on its polling URL, which is what makes the choice survive the 5s
  refresh without any client-side state. It carries no visible label -- the
  header text names the card and the values are self-evident -- so screen
  readers get ``aria-label`` instead.
#}
<section class="card card--wide" id="executions-card" hx-get="/executions?limit={{ limit }}" hx-trigger="every 5s, ci:refresh from:body" hx-swap="outerHTML">
  <h2>
    <svg class="icon" aria-hidden="true"><use href="#i-play"></use></svg>Executions
    <select id="executions-limit" name="limit" class="head-select"
            aria-label="Number of executions to show"
            hx-get="/executions" hx-target="#executions-card" hx-swap="outerHTML" hx-trigger="change">
      {% for choice in limit_choices %}
      <option value="{{ choice }}" {{ 'selected' if choice == limit else '' }}>{{ choice }}</option>
      {% endfor %}
      {% if limit not in limit_choices %}
      <option value="{{ limit }}" selected>{{ limit }}</option>
      {% endif %}
    </select>
  </h2>
  {% if not backend_available %}
  <p class="notice notice-warn" role="alert">Backend unavailable (vmrun not found on this host).</p>
  {% endif %}
  {% if executions.error %}
  <p class="notice notice-warn" role="alert">
    {{ executions.error }}
    {% if executions.auth_failed %}<a href="/login">Log in again</a> to restore the run list.{% endif %}
  </p>
  {% endif %}
  {% if executions.runs or executions.unmatched_vms %}
  <div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th>Run</th>
          <th>Repo</th>
          <th>Workflow</th>
          <th>Branch</th>
          <th>Commit</th>
          <th>Trigger</th>
          <th>Actor</th>
          <th>Status</th>
          <th>Duration</th>
          <th>Started</th>
          <th>VM</th>
          <th>IP / Uptime</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        {% for run in executions.runs %}
        <tr>
          <td>
            {% if run.html_url %}
            <a href="{{ run.html_url }}" target="_blank" rel="noopener noreferrer">#{{ run.run_id }}{% if run.attempt > 1 %}.{{ run.attempt }}{% endif %}<svg class="icon" aria-hidden="true"><use href="#i-external"></use></svg></a>
            {% else %}
            #{{ run.run_id }}{% if run.attempt > 1 %}.{{ run.attempt }}{% endif %}
            {% endif %}
          </td>
          <td>{{ run.repo or "—" }}</td>
          <td>{{ run.workflow or "—" }}</td>
          <td>{{ run.branch or "—" }}</td>
          <td>{% if run.commit %}<code class="text-dim">{{ run.commit[:7] }}</code>{% else %}—{% endif %}</td>
          <td>{{ run.event or "—" }}</td>
          <td>{{ run.actor or "—" }}</td>
          {% set run_icon = run.status | run_badge_icon %}
          <td><span class="badge {{ run.status | run_badge }}">{% if run_icon %}<svg class="icon" aria-hidden="true"><use href="#{{ run_icon }}"></use></svg>{% endif %}{{ run.status }}</span></td>
          <td>{{ run.duration_sec | duration }}</td>
          <td>
            {% if run.started %}
            <button type="button" id="started-{{ run.run_id }}-{{ run.attempt }}" class="time-toggle text-dim" data-showing="relative"
                    data-relative="{{ run.started | relative_time }}" data-absolute="{{ run.started | localtime }}"
                    title="{{ run.started | localtime }}">{{ run.started | relative_time }}</button>
            {% else %}
            <span class="text-dim">—</span>
            {% endif %}
          </td>
          <td>
            {% for vm in run.vms %}
            <div>{{ vm.name }}</div>
            {% else %}
            <span class="text-dim">—</span>
            {% endfor %}
          </td>
          <td>
            {% for vm in run.vms %}
            <div class="text-dim">{{ vm.ip or "no ip" }} · up {{ vm.uptime_sec | duration }}</div>
            {% endfor %}
          </td>
          <td>
            {% for vm in run.vms %}
            <form method="post" action="/vms/{{ vm.vmx | vmx_id }}/remove"
                  hx-post="/vms/{{ vm.vmx | vmx_id }}/remove" hx-target="#action-slot" hx-swap="innerHTML show:top">
              <input type="hidden" name="csrf" value="{{ csrf_token }}">
              <button type="submit" class="btn btn-danger btn-sm" aria-label="Remove VM {{ vm.name }}">Remove</button>
            </form>
            {% endfor %}
          </td>
        </tr>
        {% endfor %}
        {% for vm in executions.unmatched_vms %}
        <tr class="{{ 'row-orphan' if vm.is_orphan else '' }}">
          {% set parsed = vm.name | clone_job %}
          <td><span class="text-dim">{{ parsed.job_id or "no run" }}</span></td>
          <td><span class="text-dim">—</span></td>
          <td><span class="text-dim">—</span></td>
          <td><span class="text-dim">—</span></td>
          <td><span class="text-dim">—</span></td>
          <td><span class="text-dim">—</span></td>
          <td><span class="text-dim">—</span></td>
          <td>
            {% if vm.is_orphan %}
            <span class="badge badge-warn">orphan</span>
            {% else %}
            <span class="badge badge-info"><svg class="icon" aria-hidden="true"><use href="#i-play"></use></svg>running</span>
            {% endif %}
          </td>
          <td><span class="text-dim">—</span></td>
          <td>
            {% if parsed.started %}
            <button type="button" id="started-vm-{{ vm.vmx | vmx_id }}" class="time-toggle text-dim" data-showing="relative"
                    data-relative="{{ parsed.started | relative_time }}" data-absolute="{{ parsed.started | localtime }}"
                    title="{{ parsed.started | localtime }}">{{ parsed.started | relative_time }}</button>
            {% else %}
            <span class="text-dim">—</span>
            {% endif %}
          </td>
          <td>{{ vm.name }}</td>
          <td class="text-dim">{{ vm.ip or "no ip" }} · up {{ vm.uptime_sec | duration }}</td>
          <td>
            <form method="post" action="/vms/{{ vm.vmx | vmx_id }}/remove"
                  hx-post="/vms/{{ vm.vmx | vmx_id }}/remove" hx-target="#action-slot" hx-swap="innerHTML show:top">
              <input type="hidden" name="csrf" value="{{ csrf_token }}">
              <button type="submit" class="btn btn-danger btn-sm" aria-label="Remove VM {{ vm.name }}">Remove</button>
            </form>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% else %}
  <p>No recent executions{% if not executions.error %} and no VMs running{% endif %}.</p>
  {% endif %}
</section>