{% load i18n %}
<div class="text-center mb-2">
  <span class="badge text-bg-{{ status_color }} fs-6">{{ status_label }}</span>
</div>
{% if maintenance_message %}
  <p class="text-muted small text-center mb-2">{{ maintenance_message }}</p>
{% endif %}
{% if queue_counts %}
  <div class="d-flex text-center">
    <div class="flex-fill px-1">
      <div class="fs-4 fw-bold text-primary lh-1">{{ queue_counts.running }}</div>
      <div class="text-muted small">{% trans "Running" %}</div>
    </div>
    <div class="flex-fill px-1">
      <div class="fs-4 fw-bold lh-1">{{ queue_counts.waiting }}</div>
      <div class="text-muted small">{% trans "Waiting" %}</div>
    </div>
    {% if queue_counts.cancelling %}
      <div class="flex-fill px-1">
        <div class="fs-4 fw-bold text-warning lh-1">{{ queue_counts.cancelling }}</div>
        <div class="text-muted small">{% trans "Cancelling" %}</div>
      </div>
    {% endif %}
  </div>
  <div class="text-end mt-2 pt-1 border-top">
    <a href="{{ queue_url }}" class="small">{% trans "View queue" %} <i class="mdi mdi-arrow-right"></i></a>
  </div>
{% endif %}