{% extends "layout.html" %}
{% from "shared/components.html" import empty_state, stat_card, status_badge %}
{% block content %}
  <div class="amq-page" data-asyncmq-queues data-events-url="{{ url_prefix }}/events">
    <section class="amq-stat-grid" aria-label="Queue summary">
      {{ stat_card("Queues", total_queues or 0, "total-queues", "accent") }}
      {{ stat_card("Workers", total_workers or 0, "total-workers", "success") }}
    </section>

    <section class="amq-section">
      <div class="amq-section-header">
        <div>
          <h2 class="amq-section-title">Queues</h2>
          <p class="amq-section-meta">Backend-owned queue state and safe queue actions</p>
        </div>
      </div>

      <div class="amq-queue-grid">
        {% for queue in queues %}
          <article class="amq-queue-card" data-queue="{{ queue.name }}">
            <div class="amq-queue-card-header">
              <h3 class="amq-queue-title">{{ queue.name }}</h3>
              {% if queue.paused %}
                {{ status_badge("paused", "Paused") }}
              {% else %}
                {{ status_badge("running", "Running") }}
              {% endif %}
            </div>

            <div class="amq-kv-grid" aria-label="Queue counts">
              <div class="amq-kv">
                <span>Waiting</span>
                <strong class="waiting">{{ queue.waiting }}</strong>
              </div>
              <div class="amq-kv">
                <span>Active</span>
                <strong class="active">{{ queue.active }}</strong>
              </div>
              <div class="amq-kv">
                <span>Delayed</span>
                <strong class="delayed">{{ queue.delayed }}</strong>
              </div>
              <div class="amq-kv">
                <span>Failed</span>
                <strong class="failed">{{ queue.failed }}</strong>
              </div>
              <div class="amq-kv">
                <span>Completed</span>
                <strong class="completed">{{ queue.completed }}</strong>
              </div>
            </div>

            <div class="amq-actions">
              <a href="{{ url_prefix }}/queues/{{ queue.name }}" class="amq-button amq-button--primary">Details</a>
              <a href="{{ url_prefix }}/queues/{{ queue.name }}/jobs?state=waiting" class="amq-button">Jobs</a>
              <a href="{{ url_prefix }}/queues/{{ queue.name }}/repeatables" class="amq-button">Repeatables</a>
              <a href="{{ url_prefix }}/queues/{{ queue.name }}/dlq" class="amq-button amq-button--warning">Dead Letter</a>
            </div>

            <form method="post" action="{{ url_prefix }}/queues/{{ queue.name }}">
              {% if queue.paused %}
                <button name="action" value="resume" class="amq-button amq-button--primary">
                  Resume Queue
                </button>
              {% else %}
                <button name="action" value="pause" class="amq-button amq-button--danger">
                  Pause Queue
                </button>
              {% endif %}
            </form>
          </article>
        {% else %}
          {{ empty_state("No queues found") }}
        {% endfor %}
      </div>
    </section>
  </div>
{% endblock %}