{% extends "layout.html" %}
{% from "shared/components.html" import icon, status_badge %}
{% block content %}
  <div class="amq-page" data-asyncmq-queue-detail data-events-url="{{ url_prefix }}/events" data-queue-name="{{ queue }}">
    <section class="amq-section">
      <div class="amq-section-header">
        <div>
          <h2 class="amq-section-title">{{ queue }}</h2>
          <p class="amq-section-meta">Runtime queue state, operational controls, and live count history</p>
        </div>
        <div class="amq-actions">
          <a href="{{ url_prefix }}/queues" class="amq-button">Back to Queues</a>
          <a href="{{ url_prefix }}/queues/{{ queue }}/jobs" class="amq-button amq-button--primary">Inspect Jobs</a>
        </div>
      </div>
    </section>

    <section class="amq-queue-detail-hero">
      <article class="amq-card">
        <div class="amq-card-header">
          <h2 class="amq-card-title">Queue State</h2>
          <span data-queue-status>
            {% if paused %}
              {{ status_badge("paused", "Paused") }}
            {% else %}
              {{ status_badge("running", "Running") }}
            {% endif %}
          </span>
        </div>
        <div class="amq-card-body amq-queue-control-body">
          <p class="amq-queue-control-copy">
            Pause and resume are executed by the configured AsyncMQ backend. The dashboard only reports the backend result.
          </p>
          <form method="post" class="amq-actions">
            {% if 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>
        </div>
      </article>

      <article class="amq-card">
        <div class="amq-card-header">
          <h2 class="amq-card-title">Current Job Counts</h2>
          <span class="amq-card-meta">Server rendered, then refreshed from queue events</span>
        </div>
        <div class="amq-card-body amq-queue-state-grid" aria-label="Queue counts">
          <div class="amq-queue-state">
            <span>Waiting</span>
            <strong class="waiting">{{ counts.waiting }}</strong>
          </div>
          <div class="amq-queue-state amq-queue-state--warning">
            <span>Active</span>
            <strong class="active">{{ counts.active }}</strong>
          </div>
          <div class="amq-queue-state">
            <span>Delayed</span>
            <strong class="delayed">{{ counts.delayed }}</strong>
          </div>
          <div class="amq-queue-state amq-queue-state--danger">
            <span>Failed</span>
            <strong class="failed">{{ counts.failed }}</strong>
          </div>
          <div class="amq-queue-state amq-queue-state--success">
            <span>Completed</span>
            <strong class="completed">{{ counts.completed }}</strong>
          </div>
        </div>
      </article>
    </section>

    <section class="amq-grid-2">
      <article class="amq-card">
        <div class="amq-card-header">
          <h2 class="amq-card-title">Live Count History</h2>
          <span class="amq-card-meta">Last 20 queue events</span>
        </div>
        <div class="amq-card-body amq-chart-panel amq-chart-panel--queue">
          <canvas id="queue-chart"></canvas>
        </div>
      </article>

      <article class="amq-card">
        <div class="amq-card-header">
          <h2 class="amq-card-title">Queue Operations</h2>
          <span class="amq-card-meta">Runtime-backed views</span>
        </div>
        <div class="amq-card-body amq-quick-grid">
          <a href="{{ url_prefix }}/queues/{{ queue }}/jobs" class="amq-quick-card">
            <span class="amq-quick-icon">{{ icon("queues") }}</span>
            <span>
              <strong class="amq-quick-title">All Jobs</strong>
              <span class="amq-quick-meta">Search and filter queued work</span>
            </span>
          </a>
          <a href="{{ url_prefix }}/queues/{{ queue }}/repeatables" class="amq-quick-card">
            <span class="amq-quick-icon">{{ icon("metrics") }}</span>
            <span>
              <strong class="amq-quick-title">Repeatable Jobs</strong>
              <span class="amq-quick-meta">Inspect scheduled definitions</span>
            </span>
          </a>
          <a href="{{ url_prefix }}/queues/{{ queue }}/dlq" class="amq-quick-card amq-quick-card--warning">
            <span class="amq-quick-icon">{{ icon("audit") }}</span>
            <span>
              <strong class="amq-quick-title">Dead Letter</strong>
              <span class="amq-quick-meta">Review failed terminal jobs</span>
            </span>
          </a>
        </div>
      </article>
    </section>

    <script src="{{ url_for('statics', path='/vendor/chartjs/chart.umd-4.5.1.min.js') }}"></script>
  </div>
{% endblock %}