{% extends "layout.html" %}
{% from "shared/components.html" import empty_state, stat_card, status_badge %}
{% block content %}
  <div class="amq-page" data-asyncmq-dlq>
    <section class="amq-section">
      <div class="amq-section-header">
        <div>
          <h2 class="amq-section-title">Dead Letter Queue</h2>
          <p class="amq-section-meta">Queue {{ queue }} / failed jobs that require operator review</p>
        </div>
        <div class="amq-actions">
          <a href="{{ url_prefix }}/queues/{{ queue }}" class="amq-button">Queue Detail</a>
          <a href="{{ url_prefix }}/queues/{{ queue }}/jobs?state=failed" class="amq-button amq-button--primary">
            Failed Jobs
          </a>
        </div>
      </div>
    </section>

    <section class="amq-stat-grid amq-stat-grid--three" aria-label="Dead letter summary">
      {{ stat_card("Failed jobs", total or 0, tone="danger") }}
      {{ stat_card("Page", page ~ " of " ~ total_pages) }}
      {{ stat_card("Page size", size) }}
    </section>

    <form method="post" class="amq-section">
      <input type="hidden" name="page" value="{{ page }}">
      <input type="hidden" name="size" value="{{ size }}">

      {% if jobs %}
        <div class="amq-bulk-toolbar">
          <label class="amq-checkbox">
            <input type="checkbox" id="select-all-dlq" data-dlq-select-all>
            <span>Select all visible jobs</span>
          </label>
          <div class="amq-actions">
            <details class="amq-confirm">
              <summary class="amq-button amq-button--primary">Retry Selected</summary>
              <div class="amq-confirm-panel">
                <p>Retry the selected dead-lettered jobs in queue <strong>{{ queue }}</strong>.</p>
                <button name="action" value="retry" class="amq-button amq-button--primary">
                  Confirm Retry
                </button>
              </div>
            </details>
            <details class="amq-confirm">
              <summary class="amq-button amq-button--danger">Remove Selected</summary>
              <div class="amq-confirm-panel">
                <p>Remove the selected dead-lettered jobs from queue <strong>{{ queue }}</strong>.</p>
                <button name="action" value="remove" class="amq-button amq-button--danger">
                  Confirm Remove
                </button>
              </div>
            </details>
          </div>
        </div>

        <div class="amq-job-grid amq-dlq-grid">
          {% for job in jobs %}
            <article class="amq-job-card amq-dlq-card">
              <div class="amq-job-card-header">
                <div>
                  <h3 class="amq-job-title">{{ job.id }}</h3>
                  <p class="amq-job-subtitle">{{ job.task_id }}</p>
                </div>
                <label class="amq-dlq-select">
                  <input type="checkbox" name="job_id" value="{{ job.id }}" class="select-dlq">
                  <span>Select</span>
                </label>
              </div>

              <div class="amq-meta-grid">
                <div class="amq-kv">
                  <span>State</span>
                  <strong>{{ status_badge("failed", "Failed") }}</strong>
                </div>
                <div class="amq-kv">
                  <span>Failed at</span>
                  <strong>{{ job.created }}</strong>
                </div>
              </div>

              {% if job.error %}
                <p class="amq-dlq-error">{{ job.error }}</p>
              {% endif %}

              <details class="amq-diagnostic-section">
                <summary>Redacted arguments</summary>
                <div class="amq-grid-2">
                  <div>
                    <h4 class="amq-card-meta">Args</h4>
                    <pre class="amq-pre">{{ job.args_json }}</pre>
                  </div>
                  <div>
                    <h4 class="amq-card-meta">Kwargs</h4>
                    <pre class="amq-pre">{{ job.kwargs_json }}</pre>
                  </div>
                </div>
              </details>

              <details class="amq-diagnostic-section">
                <summary>Redacted payload</summary>
                <pre class="amq-pre">{{ job.payload_json }}</pre>
              </details>

              <div class="amq-actions">
                <a href="{{ url_prefix }}/queues/{{ queue }}/jobs/{{ job.id }}" class="amq-button">
                  Open Diagnostics
                </a>
              </div>
            </article>
          {% endfor %}
        </div>
      {% else %}
        {{ empty_state("No dead-lettered jobs", "Failed jobs will appear here when the backend reports them.") }}
      {% endif %}
    </form>

    <div class="amq-pagination">
      <span>Showing {{ jobs|length }} of {{ total }} failed jobs</span>
      <nav class="amq-pagination-nav" aria-label="Dead letter pages">
        {% if page > 1 %}
          <a href="?page={{ page - 1 }}&size={{ size }}" class="amq-pagination-link">Previous</a>
        {% else %}
          <span class="amq-pagination-link" aria-disabled="true">Previous</span>
        {% endif %}
        <span class="amq-pagination-current" aria-current="page">{{ page }}</span>
        {% if page < total_pages %}
          <a href="?page={{ page + 1 }}&size={{ size }}" class="amq-pagination-link">Next</a>
        {% else %}
          <span class="amq-pagination-link" aria-disabled="true">Next</span>
        {% endif %}
      </nav>
    </div>
  </div>
{% endblock %}