{# templates/repeatables/repeatables.html #}
{% extends "layout.html" %}
{% block content %}
  <div class="px-6 py-4">
    <div class="flex justify-between items-center mb-6">
      <h1 class="text-2xl font-semibold">Repeatable Jobs — {{ queue }}</h1>
      <a href="{{ url_prefix }}/queues/{{ queue }}/repeatables/new"
         class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition">
        + New Repeatable
      </a>
    </div>

    <div class="overflow-x-auto bg-white shadow ring-1 ring-gray-200 sm:rounded-lg">
      <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
          <tr>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              Task
            </th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              Every (s)
            </th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              Cron
            </th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              Next Run
            </th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              Status
            </th>
            <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
              Actions
            </th>
          </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
          {% for r in repeatables %}
          <tr class="hover:bg-gray-50">
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
              {{ r.task_id }}
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
              {{ r.every or '—' }}
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
              {{ r.cron or '—' }}
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
              {{ r.next_run }}
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm">
              {% if r.paused %}
                <span class="px-2 py-0.5 bg-yellow-100 text-yellow-800 rounded-full text-xs font-semibold">Paused</span>
              {% else %}
                <span class="px-2 py-0.5 bg-green-100 text-green-800 rounded-full text-xs font-semibold">Active</span>
              {% endif %}
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-center text-sm font-medium space-x-2">
              <form method="post" class="inline-block">
                <input type="hidden" name="job_def" value='{{ r | tojson }}'>
                {% if r.paused %}
                  <button name="action" value="resume"
                          class="px-2 py-1 bg-green-500 text-white rounded hover:bg-green-600 text-xs">
                    Resume
                  </button>
                {% else %}
                  <button name="action" value="pause"
                          class="px-2 py-1 bg-yellow-500 text-white rounded hover:bg-yellow-600 text-xs">
                    Pause
                  </button>
                {% endif %}
                <button name="action" value="remove"
                        class="px-2 py-1 bg-red-500 text-white rounded hover:bg-red-600 text-xs">
                  Remove
                </button>
              </form>
            </td>
          </tr>
          {% else %}
          <tr>
            <td colspan="6" class="px-6 py-8 text-center text-gray-500 italic">
              No repeatable jobs defined.
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
{% endblock %}
