{% extends "base.html" %}
{% import "_pagination.html" as pagination %}

{% block title %}Queue Details: {{ queue_name }} - Control Plane{% endblock %}

{% block content %}
<turbo-frame id="content">
<div class="mb-8">
  <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
    <div class="min-w-0">
      <h1 class="text-xl sm:text-2xl font-bold text-gray-900 break-words">Queue: {{ queue_name }}</h1>
      <p class="text-sm text-gray-500 mt-1">Status: <span class="font-medium {% if queue_status == 'active' %}text-green-600{% else %}text-amber-600{% endif %}">{{ queue_status }}</span></p>
    </div>
    <div class="flex flex-wrap gap-2">
      {% if queue_status == 'active' %}
        <form action="{{ base_path }}/queues/{{ queue_name }}/pause" method="post" data-turbo-frame="_top">
          <button type="submit" class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-900 text-gray-50 hover:bg-gray-900/90 h-9 px-4 py-2">
            Pause Queue
          </button>
        </form>
      {% else %}
        <form action="{{ base_path }}/queues/{{ queue_name }}/resume" method="post" data-turbo-frame="_top">
          <button type="submit" class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-900 text-gray-50 hover:bg-gray-900/90 h-9 px-4 py-2">
            Resume Queue
          </button>
        </form>
      {% endif %}
      <a href="{{ base_path }}/queues" class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-gray-200 bg-white hover:bg-gray-100 h-9 px-4 py-2">
        Back to Queues
      </a>
    </div>
  </div>

  <!-- Jobs Table -->
  <div class="mb-6">
    <h2 class="text-lg font-semibold text-gray-900 mb-4">Ready Jobs in Queue</h2>
    <p class="text-sm text-gray-500 -mt-2 mb-4">Only jobs ready to be claimed by a worker are listed here. Scheduled, blocked, in-progress and failed jobs appear in their respective top-nav tabs.</p>

    <!-- Mobile cards -->
    <div class="sm:hidden space-y-3">
      {% if jobs|length > 0 %}
        {% for job in jobs %}
        <div class="rounded-lg border border-gray-200 p-4 space-y-2 text-sm">
          <div class="min-w-0">
            <div class="font-medium text-gray-900 truncate">
              <a href="{{ base_path }}/jobs/{{ job.id }}" data-turbo-action="advance" class="hover:underline">{{ job.class_name }}</a>
            </div>
            <div class="text-xs text-gray-500">ID {{ job.id }}</div>
          </div>
          {% if job.priority != 0 %}
          <div class="text-xs text-gray-500">Priority {{ job.priority }}</div>
          {% endif %}
          <div class="text-xs text-gray-500">
            Created <span data-controller="localtime" data-localtime-datetime-value="{{ job.created_at }}">{{ job.created_at }}</span>
          </div>
        </div>
        {% endfor %}
      {% else %}
        <div class="rounded-lg border border-gray-200 p-4 text-sm text-center text-gray-500">No ready jobs in this queue</div>
      {% endif %}
    </div>

    <!-- Desktop table -->
    <div class="hidden sm:block overflow-x-auto rounded-lg border border-gray-200">
      <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
          <tr>
            <th scope="col" class="px-3 py-2 sm:px-6 sm:py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              Job Class
            </th>
            <th scope="col" class="px-3 py-2 sm:px-6 sm:py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              Job ID
            </th>
            <th scope="col" class="px-3 py-2 sm:px-6 sm:py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              Priority
            </th>
            <th scope="col" class="px-3 py-2 sm:px-6 sm:py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              Created At
            </th>
          </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
          {% if jobs|length > 0 %}
            {% for job in jobs %}
            <tr>
              <td class="px-3 py-3 sm:px-6 sm:py-4 whitespace-nowrap">
                <div class="text-sm font-medium text-gray-900">
                  <a href="{{ base_path }}/jobs/{{ job.id }}" data-turbo-action="advance" class="hover:underline">{{ job.class_name }}</a>
                </div>
              </td>
              <td class="px-3 py-3 sm:px-6 sm:py-4 whitespace-nowrap">
                <div class="text-sm text-gray-500">{{ job.id }}</div>
              </td>
              <td class="px-3 py-3 sm:px-6 sm:py-4 whitespace-nowrap">
                <div class="text-sm {% if job.priority == 0 %}text-gray-400{% else %}text-gray-900{% endif %}">{{ job.priority }}</div>
              </td>
              <td class="px-3 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-500">
                <span data-controller="localtime" data-localtime-datetime-value="{{ job.created_at }}">{{ job.created_at }}</span>
              </td>
            </tr>
            {% endfor %}
          {% else %}
            <tr>
              <td colspan="4" class="px-3 py-3 sm:px-6 sm:py-4 text-center text-sm text-gray-500">
                No ready jobs in this queue
              </td>
            </tr>
          {% endif %}
        </tbody>
      </table>
    </div>
  </div>

  <!-- Pagination -->
  {{ pagination::bar(base_path=base_path, path="queues/" ~ queue_name, page=current_page, total_pages=total_pages) }}
</div>
</turbo-frame>
{% endblock %}