{% from "partials/status_badge.html" import status_badge %}
<div class="metric-card">
  <h6 class="section-title">Invocation Status</h6>
  <div class="d-flex flex-wrap gap-2 mb-3">
    {% for status, count in status_counts.items() %}
    <div class="badge-item d-flex align-items-center">
      {{ status_badge(status) }}
      <span class="fw-semibold ms-2" style="font-size: 14px">{{ count }}</span>
    </div>
    {% endfor %}
  </div>
  <div class="border-top pt-2">
    <small class="text-muted"
      >Total:
      <span class="fw-bold">{{ status_counts.values()|sum }}</span></small
    >
  </div>
</div>

{% if blocking_invocations %}
<div class="metric-card mt-3">
  <h6 class="section-title">Blocking Invocations</h6>
  <div class="table-responsive">
    <table class="table table-sm table-borderless mb-0">
      <thead>
        <tr>
          <th style="font-size: 12px; color: var(--text-secondary)">ID</th>
          <th style="font-size: 12px; color: var(--text-secondary)">Task</th>
          <th style="font-size: 12px; color: var(--text-secondary)">Status</th>
        </tr>
      </thead>
      <tbody>
        {% for invocation in blocking_invocations %}
        <tr>
          <td>
            <a
              href="/invocations/{{ invocation.invocation_id }}"
              class="text-decoration-none"
            >
              <code class="text-primary" style="font-size: 11px"
                >{{ invocation.invocation_id[:8] }}...</code
              >
            </a>
          </td>
          <td style="font-size: 12px">
            {{ invocation.task.task_id.split('.')[-1] }}
          </td>
          <td>{{ status_badge(invocation.status.name, 'small') }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% else %}
<div class="info-card mt-3 text-center">
  <div class="text-success">
    <span class="material-icons" style="font-size: 24px">check_circle</span>
  </div>
  <small class="text-muted">No blocking invocations</small>
</div>
{% endif %}