{#
  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.

  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 and the count in the status-header VMs tile;
  ``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 re-fetches the card with ``?limit=N``, and the card it
  renders carries that same limit on its own polling URL -- that is what makes
  the choice survive the 5s refresh without any client-side state.
#}
<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</h2>
  <div class="card-toolbar">
    <label for="executions-limit">Show</label>
    <select id="executions-limit" name="limit" 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>
    <span class="field-hint">newest first</span>
  </div>
  {% 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>Workflow</th>
          <th>Branch / commit</th>
          <th>Trigger</th>
          <th>Status</th>
          <th>Duration</th>
          <th>VM</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.number }}{% if run.attempt > 1 %}.{{ run.attempt }}{% endif %}<svg class="icon" aria-hidden="true"><use href="#i-external"></use></svg></a>
            {% else %}
            #{{ run.number }}{% if run.attempt > 1 %}.{{ run.attempt }}{% endif %}
            {% endif %}
            {% if run.repo %}<br><span class="text-dim">{{ run.repo }}</span>{% endif %}
          </td>
          <td>{{ run.workflow or "—" }}</td>
          <td>
            {{ run.branch or "—" }}
            {% if run.commit %}<br><code class="text-dim">{{ run.commit[:7] }}</code>{% endif %}
          </td>
          <td>
            {{ run.event or "—" }}
            {% if run.actor %}<br><span class="text-dim">{{ run.actor }}</span>{% endif %}
          </td>
          <td><span class="badge {{ run.status | run_badge }}">{{ run.status }}</span></td>
          <td>
            {{ run.duration_sec | duration }}
            {% if run.started %}<br><span class="text-dim" title="{{ run.started | localtime }}">{{ run.started | relative_time }}</span>{% endif %}
          </td>
          <td>
            {% for vm in run.vms %}
            <div>
              {{ vm.name }}
              <br><span class="text-dim">{{ vm.ip or "no ip" }} · up {{ vm.uptime_sec | duration }}</span>
            </div>
            {% else %}
            <span class="text-dim">—</span>
            {% 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>
            {% if vm.is_orphan %}
            <span class="badge badge-warn">orphan</span>
            {% else %}
            <span class="badge badge-info">running</span>
            {% endif %}
          </td>
          <td>
            {% if parsed.started %}
            <span class="text-dim" title="{{ parsed.started | localtime }}">{{ parsed.started | relative_time }}</span>
            {% else %}
            <span class="text-dim">—</span>
            {% endif %}
          </td>
          <td>
            {{ vm.name }}
            <br><span class="text-dim">{{ vm.ip or "no ip" }} · up {{ vm.uptime_sec | duration }}</span>
          </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>