{% for card in cards %}
<article class="pipeline-card">
  <h3>{{ card.name }}</h3>
  <p>
    current {{ card.current_version_label or card.current_version or "-" }}
    {% if card.service_status == "running" and card.running_version %}
    · running {{ card.running_version_label or card.running_version }}
    {% if card.version_drift %}
    <span class="chip chip-warning">restart to apply</span>
    {% endif %}
    {% elif card.service_status == "paused" and card.running_version %}
    · last ran {{ card.running_version_label or card.running_version }}
    {% endif %}
    · service <span class="chip chip-{{ card.service_status }}">{{ card.service_status }}</span>
  </p>
  <p class="counts">
    {% for status, count in card.counts.items() if count > 0 %}
    <span class="chip chip-{{ status }}">{{ status }}={{ count }}</span>
    {% endfor %}
    {% if card.open_flags %}
    <span class="flag-badge">flags={{ card.open_flags }} (max {{ card.max_flag_level }})</span>
    {% endif %}
  </p>
  {% if card.start_problems %}
  <ul class="problems">
    {% for problem in card.start_problems %}
    <li><code>{{ problem.path }}</code>: {{ problem.message }}</li>
    {% endfor %}
  </ul>
  {% elif card.start_error %}
  <p class="error">{{ card.start_error }}</p>
  {% endif %}
  <p class="actions">
    {% if card.action_pending == "pausing" %}
    <button type="button" disabled>pausing…</button>
    {% elif card.action_pending == "starting" %}
    <button type="button" disabled>starting…</button>
    {% elif card.service_status == "running" %}
    <form action="/pipelines/{{ card.id }}/pause" method="post" style="display:inline" class="pipeline-action-form" onsubmit="const b=this.querySelector('button'); b.disabled=true; b.textContent='pausing…';">
      <button type="submit">Pause</button>
    </form>
    {% else %}
    <form action="/pipelines/{{ card.id }}/start" method="post" style="display:inline" class="pipeline-action-form" onsubmit="const b=this.querySelector('button'); b.disabled=true; b.textContent='starting…';">
      <button type="submit">Start</button>
    </form>
    {% endif %}
    <a href="/pipelines/{{ card.id }}/tasks">Tasks</a>
    <a href="/pipelines/{{ card.id }}/edit">Edit</a>
    <a href="/pipelines/{{ card.id }}/versions">History</a>
  </p>
</article>
{% else %}
<p>(no pipelines)</p>
{% endfor %}