{% extends "layout.html" %}
{% block content %}
  <!-- Header & Page-Size Selector -->
  <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
    <h1 class="text-3xl font-bold text-gray-900">{{ page_header }}</h1>
    <form method="get" class="flex items-center space-x-2">
      <label for="size" class="text-sm font-medium text-gray-700">Show</label>
      <select id="size" name="size" onchange="this.form.submit()"
              class="border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500">
        {% for s in page_sizes %}
          <option value="{{ s }}" {% if s == size %}selected{% endif %}>{{ s }}</option>
        {% endfor %}
      </select>
      <span class="text-sm text-gray-700">per page</span>
      <input type="hidden" name="page" value="1">
    </form>
  </div>

  <!-- Workers Table -->
  <div class="bg-white shadow overflow-hidden sm:rounded-lg">
    <table class="min-w-full divide-y divide-gray-200">
      <thead class="bg-gray-50">
        <tr>
          <th scope="col"
              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
            ID
          </th>
          <th scope="col"
              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
            Queue
          </th>
          <th scope="col"
              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
            Concurrency
          </th>
          <th scope="col"
              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
            Last Heartbeat
          </th>
        </tr>
      </thead>
      <tbody class="bg-white divide-y divide-gray-200">
        {% for w in workers %}
        <tr class="hover:bg-gray-50">
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
            {{ w.id }}
          </td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
            {{ w.queue }}
          </td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
            {{ w.concurrency }}
          </td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
            {{ w.heartbeat }}
          </td>
        </tr>
        {% endfor %}
        {% if workers|length == 0 %}
        <tr>
          <td colspan="4"
              class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 italic text-center">
            No workers found.
          </td>
        </tr>
        {% endif %}
      </tbody>
    </table>
  </div>

  <!-- Pagination & Summary -->
  <div class="mt-6 flex flex-col sm:flex-row sm:items-center sm:justify-between">
    <p class="text-sm text-gray-700 mb-4 sm:mb-0">
      {% if total > 0 %}
      Showing
      <span class="font-medium">{{ (page - 1) * size + 1 }}</span>
      to
      <span class="font-medium">{{ (page - 1) * size + workers|length }}</span>
      of
      <span class="font-medium">{{ total }}</span>
      results
      {% else %}
      No results found
      {% endif %}
    </p>
    <nav class="inline-flex -space-x-px">
      {% if page and page > 1 %}
      <a href="?page={{ page - 1 }}&size={{ size }}"
         class="px-3 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
        Previous
      </a>
      {% else %}
      <span class="px-3 py-2 rounded-l-md border border-gray-300 bg-gray-100 text-sm font-medium text-gray-400 cursor-not-allowed">
        Previous
      </span>
      {% endif %}

      {% for p in range(1, total_pages + 1) %}
      <a href="?page={{ p }}&size={{ size }}"
         class="px-3 py-2 border-t border-b border-gray-300 bg-white text-sm font-medium {% if p == page %}text-indigo-600{% else %}text-gray-500 hover:bg-gray-50{% endif %}">
        {{ p }}
      </a>
      {% endfor %}

      {% if page and page < total_pages %}
      <a href="?page={{ page + 1 }}&size={{ size }}"
         class="px-3 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
        Next
      </a>
      {% else %}
      <span class="px-3 py-2 rounded-r-md border border-gray-300 bg-gray-100 text-sm font-medium text-gray-400 cursor-not-allowed">
        Next
      </span>
      {% endif %}
    </nav>
  </div>
{% endblock %}
