{% extends "layout.html" %}
{% from "shared/components.html" import empty_state, stat_card, status_badge %}
{% block content %}
  <div class="amq-page">
    <section class="amq-section">
      <div class="amq-section-header">
        <div>
          <h2 class="amq-section-title">Repeatable Jobs</h2>
          <p class="amq-section-meta">Queue {{ queue }} / backend-owned scheduled job definitions</p>
        </div>
        <div class="amq-actions">
          <a href="{{ url_prefix }}/queues/{{ queue }}" class="amq-button">Queue Detail</a>
          <a href="{{ url_prefix }}/queues/{{ queue }}/repeatables/new" class="amq-button amq-button--primary">
            New Repeatable
          </a>
        </div>
      </div>
    </section>

    <section class="amq-stat-grid amq-stat-grid--three" aria-label="Repeatable summary">
      {{ stat_card("Definitions", repeatables|length, tone="accent") }}
      {{ stat_card("Active", repeatables|selectattr("paused", "equalto", false)|list|length, tone="success") }}
      {{ stat_card("Paused", repeatables|selectattr("paused")|list|length, tone="warning") }}
    </section>

    <section class="amq-table-wrap">
      <div class="amq-table-toolbar">
        <div>
          <h2 class="amq-card-title">Scheduled Definitions</h2>
          <p class="amq-card-meta">Pause, resume, or remove backend repeatable definitions</p>
        </div>
      </div>

      <table class="amq-table amq-repeatables-table">
        <thead>
          <tr>
            <th scope="col">Task</th>
            <th scope="col">Interval</th>
            <th scope="col">Cron</th>
            <th scope="col">Next Run</th>
            <th scope="col">Status</th>
            <th scope="col">Definition</th>
            <th scope="col">Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for r in repeatables %}
            <tr>
              <td>
                <span class="amq-mono">{{ r.task_id or "n/a" }}</span>
              </td>
              <td>{{ r.every or "—" }}</td>
              <td><span class="amq-mono">{{ r.cron or "—" }}</span></td>
              <td>{{ r.next_run }}</td>
              <td>
                {% if r.paused %}
                  {{ status_badge("paused", "Paused") }}
                {% else %}
                  {{ status_badge("active", "Active") }}
                {% endif %}
              </td>
              <td>
                <details class="amq-diagnostic-section amq-repeatable-definition">
                  <summary>Redacted definition</summary>
                  <pre class="amq-pre">{{ r.job_def_display }}</pre>
                </details>
              </td>
              <td>
                <div class="amq-actions">
                  <form method="post" class="amq-inline-form">
                    <input type="hidden" name="job_def" value="{{ r.job_def_json }}">
                    {% if r.paused %}
                      <button name="action" value="resume" class="amq-button amq-button--primary">
                        Resume
                      </button>
                    {% else %}
                      <button name="action" value="pause" class="amq-button amq-button--warning">
                        Pause
                      </button>
                    {% endif %}
                  </form>

                  <form method="post" class="amq-inline-form">
                    <input type="hidden" name="job_def" value="{{ r.job_def_json }}">
                    <details class="amq-confirm">
                      <summary class="amq-button amq-button--danger">Remove</summary>
                      <div class="amq-confirm-panel">
                        <p>Remove repeatable definition <strong>{{ r.task_id or "n/a" }}</strong> from queue <strong>{{ queue }}</strong>.</p>
                        <button name="action" value="remove" class="amq-button amq-button--danger">
                          Confirm Remove
                        </button>
                      </div>
                    </details>
                  </form>
                </div>
              </td>
            </tr>
          {% else %}
            <tr>
              <td colspan="7">
                {{ empty_state("No repeatable jobs", "Backend repeatable definitions will appear here when configured.") }}
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </section>
  </div>
{% endblock %}