{% extends "layout.html" %}

{% block content %}
  <section
    class="ui-shell"
    data-signals="{schSort: 'config_name', schDirection: 'asc', schSearch: '', schPage: 1, schFetching: false}"
  >
    <p class="ui-eyebrow">Admin Only</p>
    <h1 class="ui-page-title">Sync Schedules</h1>
    <p class="ui-page-subtitle">View and manage automatic sync schedules for all configurations.</p>

    <!-- Filter -->
    <div class="mt-6 flex items-center gap-3">
      <input
        type="text"
        placeholder="Filter by project name..."
        data-bind:sch-search
        data-on:input__debounce.300ms="$schPage = 1; @get('/admin/schedules/filter')"
        class="ui-form-input max-w-sm"
      />
      <div data-show="$schFetching" class="text-[14px] text-slate-400 dark:text-slate-500">Loading...</div>
    </div>

    <!-- Schedule Table -->
    <div class="mt-4 ui-table-wrap">
      <table class="ui-table">
        <thead>
          <tr class="ui-table-head-row">
            <th
              class="ui-table-th ui-table-th-left cursor-pointer select-none hover:text-slate-700 dark:hover:text-slate-200"
              data-on:click="$schDirection = ($schSort === 'config_name' && $schDirection === 'asc') ? 'desc' : 'asc'; $schSort = 'config_name'; $schPage = 1; @get('/admin/schedules/filter')"
            >
              Project
            </th>
            <th
              class="ui-table-th ui-table-th-left cursor-pointer select-none hover:text-slate-700 dark:hover:text-slate-200"
              data-on:click="$schDirection = ($schSort === 'schedule_type' && $schDirection === 'asc') ? 'desc' : 'asc'; $schSort = 'schedule_type'; $schPage = 1; @get('/admin/schedules/filter')"
            >
              Type
            </th>
            <th class="ui-table-th ui-table-th-left">
              Description
            </th>
            <th
              class="ui-table-th ui-table-th-left cursor-pointer select-none hover:text-slate-700 dark:hover:text-slate-200"
              data-on:click="$schDirection = ($schSort === 'schedule_enabled' && $schDirection === 'asc') ? 'desc' : 'asc'; $schSort = 'schedule_enabled'; $schPage = 1; @get('/admin/schedules/filter')"
            >
              Enabled
            </th>
            <th
              class="ui-table-th ui-table-th-left cursor-pointer select-none hover:text-slate-700 dark:hover:text-slate-200"
              data-on:click="$schDirection = ($schSort === 'schedule_last_run_at' && $schDirection === 'asc') ? 'desc' : 'asc'; $schSort = 'schedule_last_run_at'; $schPage = 1; @get('/admin/schedules/filter')"
            >
              Last Sync
            </th>
            <th
              class="ui-table-th ui-table-th-left cursor-pointer select-none hover:text-slate-700 dark:hover:text-slate-200"
              data-on:click="$schDirection = ($schSort === 'next_run_time' && $schDirection === 'asc') ? 'desc' : 'asc'; $schSort = 'next_run_time'; $schPage = 1; @get('/admin/schedules/filter')"
            >
              Next Run
            </th>
          </tr>
        </thead>
        <tbody id="schedule-table-body">
          {% for s in schedules %}
            {% include "schedules/_row.html" %}
          {% endfor %}
          {% if not schedules %}
            <tr>
              <td colspan="6" class="py-8 text-center text-sm text-slate-400 dark:text-slate-500">No configurations found.</td>
            </tr>
          {% endif %}
          {% if pagination and pagination.total_items > 0 %}
          <tr>
            <td colspan="6">
              <div class="flex items-center justify-between py-3 text-sm text-slate-600 dark:text-slate-300">
                <p>
                  Showing <span class="font-medium text-slate-800 dark:text-slate-200">{{ pagination.start_index }}</span>
                  to <span class="font-medium text-slate-800 dark:text-slate-200">{{ pagination.end_index }}</span>
                  of <span class="font-medium text-slate-800 dark:text-slate-200">{{ pagination.total_items }}</span> results
                </p>
                {% if pagination.total_pages > 1 %}
                <nav class="flex items-center gap-1">
                  {% if pagination.has_prev %}
                    <button data-on:click="$schPage = {{ pagination.page - 1 }}; @get('/admin/schedules/filter')"
                      class="px-3 py-1.5 text-sm border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800 cursor-pointer">Prev</button>
                  {% else %}
                    <span class="px-3 py-1.5 text-sm border border-slate-200 dark:border-slate-700 text-slate-400 dark:text-slate-600 cursor-not-allowed">Prev</span>
                  {% endif %}
                  {% for p in pagination.page_range(2) %}
                    {% if p == pagination.page %}
                      <span class="px-3 py-1.5 text-sm border border-brand-500 bg-brand-50 dark:bg-brand-700/30 text-brand-700 dark:text-brand-200 font-medium">{{ p }}</span>
                    {% else %}
                      <button data-on:click="$schPage = {{ p }}; @get('/admin/schedules/filter')"
                        class="px-3 py-1.5 text-sm border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800 cursor-pointer">{{ p }}</button>
                    {% endif %}
                  {% endfor %}
                  {% if pagination.has_next %}
                    <button data-on:click="$schPage = {{ pagination.page + 1 }}; @get('/admin/schedules/filter')"
                      class="px-3 py-1.5 text-sm border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800 cursor-pointer">Next</button>
                  {% else %}
                    <span class="px-3 py-1.5 text-sm border border-slate-200 dark:border-slate-700 text-slate-400 dark:text-slate-600 cursor-not-allowed">Next</span>
                  {% endif %}
                </nav>
                {% endif %}
              </div>
            </td>
          </tr>
          {% endif %}
        </tbody>
      </table>
    </div>
  </section>
{% endblock %}