{% load i18n %}
<div class="text-center mb-2">
  <div class="fs-1 fw-bold text-success lh-1">{{ active }}</div>
  <div class="text-muted small">{% trans "active workflows" %}</div>
</div>
<div class="list-group list-group-flush">
  {% for row in status_rows %}
    <div class="list-group-item d-flex justify-content-between align-items-center px-1 py-1">
      <span class="badge text-bg-{{ row.color }}">{{ row.label }}</span>
      <strong>{{ row.count }}</strong>
    </div>
  {% endfor %}
</div>
<div class="d-flex justify-content-between align-items-center mt-2 pt-1 border-top">
  <span class="text-muted small">{{ total }} {% trans "total" %}</span>
  <a href="{{ list_url }}" class="small">{% trans "Browse workflows" %} <i class="mdi mdi-arrow-right"></i></a>
</div>