{% extends "layout.html" %}
{% from "shared/components.html" import empty_state, status_badge %}
{% block content %}
  <div class="amq-page">
    <section class="amq-section">
      <div class="amq-section-header">
        <div>
          <h2 class="amq-section-title">Queue: {{ queue }}</h2>
          <p class="amq-section-meta">{{ total }} {{ state }} jobs found</p>
        </div>
        <a href="{{ url_prefix }}/queues/{{ queue }}" class="amq-button">Back to Queue</a>
      </div>

      <nav class="amq-pill-nav" aria-label="Job state filters">
        {% for key, label in tabs %}
          <a
            href="{{ tab_urls[key] }}"
            class="amq-pill{% if key == state %} is-active{% endif %}"
            {% if key == state %}aria-current="page"{% endif %}
          >
            {{ label }}
          </a>
        {% endfor %}
      </nav>

      <form method="get" class="amq-filter-panel">
        <input type="hidden" name="state" value="{{ state }}">
        <label class="amq-field amq-field-wide">
          <span>Search</span>
          <input type="text"
                 name="q"
                 value="{{ q }}"
                 placeholder="Payload text"
                 class="amq-input">
        </label>
        <label class="amq-field">
          <span>Task</span>
          <input type="text"
                 name="task"
                 value="{{ task }}"
                 placeholder="Task contains"
                 class="amq-input">
        </label>
        <label class="amq-field">
          <span>Job ID</span>
          <input type="text"
                 name="job_id"
                 value="{{ job_id }}"
                 placeholder="Job ID contains"
                 class="amq-input">
        </label>
        <label class="amq-field">
          <span>Sort</span>
          <select name="sort" class="amq-select">
            <option value="newest" {% if sort == "newest" %}selected{% endif %}>Newest first</option>
            <option value="oldest" {% if sort == "oldest" %}selected{% endif %}>Oldest first</option>
          </select>
        </label>
        <label class="amq-field">
          <span>Rows</span>
          <select name="size" class="amq-select">
            {% for option in page_sizes %}
              <option value="{{ option }}" {% if size == option %}selected{% endif %}>{{ option }} / page</option>
            {% endfor %}
          </select>
        </label>
        <button type="submit" class="amq-button amq-button--primary">
          Apply
        </button>
        <a href="?state={{ state }}&sort={{ sort }}&size={{ size }}" class="amq-button">
          Clear
        </a>
      </form>
    </section>

    <section class="amq-job-grid">
      {% for job in jobs %}
        <article class="amq-job-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>
            {{ status_badge(job.status) }}
          </div>

          <div class="amq-kv-grid">
            <div class="amq-kv">
              <span>Created</span>
              <strong>{{ job.created_at }}</strong>
            </div>
            <div class="amq-kv">
              <span>Run at</span>
              <strong>{{ job.run_at or "-" }}</strong>
            </div>
          </div>

          <pre class="amq-job-snippet">{{ job.payload_json }}</pre>

          <div class="amq-actions">
            <a href="{{ url_prefix }}/queues/{{ queue }}/jobs/{{ job.id }}" class="amq-button amq-button--primary">
              Inspect
            </a>
          </div>
        </article>
      {% else %}
        {{ empty_state("No jobs to display", "Try another state or clear the filters.") }}
      {% endfor %}
    </section>

    <div class="amq-pagination">
      <p class="amq-card-meta">Page {{ page }} of {{ total_pages }}</p>
      <nav class="amq-pagination-nav" aria-label="Job pages">
        {% if prev_page_url %}
          <a href="{{ prev_page_url }}" 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 next_page_url %}
          <a href="{{ next_page_url }}" class="amq-pagination-link">Next</a>
        {% else %}
          <span class="amq-pagination-link" aria-disabled="true">Next</span>
        {% endif %}
      </nav>
    </div>
  </div>
{% endblock %}