{% extends "layout.html.tera" %}

{% block title %}Queues{% endblock title %}

{% block content %}
  <div class="bg-white shadow rounded-lg p-6 dark:bg-gray-900 dark:text-white">
    <h2 class="text-xl font-semibold mb-4">Available Queues</h2>

    <!-- Summary + Filter -->
    <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center mb-4 gap-4">
      <div class="flex flex-wrap gap-2">
        <div class="text-sm text-white bg-green-600 px-3 py-1 rounded-lg">
          Success Jobs: <strong>{{ stats.success_jobs }}</strong>
        </div>
        <div class="text-sm text-white bg-red-600 px-3 py-1 rounded-lg">
          Failed Jobs: <strong>{{ stats.failed_jobs }}</strong>
        </div>
        <div class="text-sm text-white bg-yellow-600 px-3 py-1 rounded-lg">
          Retry Jobs: <strong>{{ stats.retry_jobs }}</strong>
        </div>
        <div class="text-sm text-white bg-blue-600 px-3 py-1 rounded-lg">
          Pending Jobs: <strong>{{ stats.pending_jobs }}</strong>
        </div>
      </div>

      <form method="GET" class="flex gap-2 items-center">
        <input
          type="text"
          name="search"
          placeholder="Search queues"
          value="{{ query.search | default(value="") }}"
          class="border border-gray-300 dark:border-gray-700 rounded px-3 py-2 bg-white dark:bg-gray-800 text-sm text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500"
        />
        <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-full text-sm font-medium transition">
          Filter
        </button>
      </form>
    </div>

    {% if queues | length == 0 %}
      <p class="text-gray-400">No queues found.</p>
    {% else %}
      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700 text-sm">
          <thead class="bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 font-semibold">
            <tr>
              <th class="px-4 py-2 text-left">Queue</th>
              <th class="px-4 py-2 text-left">Pending</th>
              <th class="px-4 py-2 text-left">Retry</th>
              <th class="px-4 py-2 text-left">Success</th>
              <th class="px-4 py-2 text-left">Failed</th>
              <th class="px-4 py-2 text-left">Actions</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
            {% for queue in queues %}
              <tr class="hover:bg-gray-50 dark:hover:bg-gray-800 text-gray-800 dark:text-gray-100">
                <td class="px-4 py-2 font-mono">{{ queue.name }}</td>
                <td class="px-4 py-2">{{ queue.pending }}</td>
                <td class="px-4 py-2 text-yellow-600 dark:text-yellow-400">{{ queue.retry }}</td>
                <td class="px-4 py-2 text-green-600 dark:text-green-400">{{ queue.success }}</td>
                <td class="px-4 py-2 text-red-600 dark:text-red-400">{{ queue.failed }}</td>
                <td class="px-4 py-2">
                  <a href="/qrush/metrics/queues/{{ queue.name }}"
                    class="text-sm text-white bg-blue-600 hover:bg-blue-700 px-3 py-1 rounded-full transition">
                    View Jobs
                  </a>
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    {% endif %}

    {% if page is defined %}
      <div class="flex flex-col sm:flex-row justify-between items-center mt-4 text-sm text-gray-600 dark:text-gray-300 gap-2">
        <div>
          Showing {{ page.start }} to {{ page.end }} of {{ page.total }} queues
        </div>
        <div class="space-x-2">
          {% if page.has_prev %}
            <a href="?page={{ page.current - 1 }}&{{ page.query }}" class="px-3 py-1 border rounded dark:text-white dark:border-gray-600">
              Prev
            </a>
          {% endif %}
          {% if page.has_next %}
            <a href="?page={{ page.current + 1 }}&{{ page.query }}" class="px-3 py-1 border rounded dark:text-white dark:border-gray-600">
              Next
            </a>
          {% endif %}
        </div>
      </div>
    {% endif %}
  </div>
{% endblock content %}