{% extends "base.html" %}
{% block title %}Scheduler — Hassette{% endblock %}
{% block content %}
  <h1 class="ht-heading-4">
    <span class="ht-icon"><i class="fas fa-clock"></i></span>
    <span>Scheduler</span>
  </h1>
  <!-- App filter -->
  <div class="ht-field-group ht-mb-4" hx-disinherit="hx-select">
    <div class="ht-control">
      <div class="ht-select ht-select--sm">
        <select id="scheduler-owner-filter"
                hx-get="/ui/partials/scheduler-jobs"
                hx-target="#scheduler-jobs"
                hx-swap="innerHTML"
                hx-include="#scheduler-owner-filter"
                name="owner"
                @change="$nextTick(() => htmx.ajax('GET', '/ui/partials/scheduler-history?' + new URLSearchParams({owner: $el.value}).toString(), {target: '#scheduler-history', swap: 'innerHTML'}))">
          <option value="">All Apps</option>
          {% for owner in owners %}<option value="{{ owner }}">{{ owner }}</option>{% endfor %}
        </select>
      </div>
    </div>
  </div>
  <!-- Scheduled Jobs -->
  <div class="ht-card ht-mb-6">
    <h2 class="ht-heading-5">
      <span class="ht-icon"><i class="fas fa-list-check"></i></span>
      <span>Scheduled Jobs</span>
    </h2>
    <table class="ht-table ht-table--dense">
      <thead>
        <tr>
          <th>Name</th>
          <th>App</th>
          <th>Trigger</th>
          <th>Next Run</th>
          <th>Repeat</th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody id="scheduler-jobs" data-live-on-app="/ui/partials/scheduler-jobs">
        {% include "partials/scheduler_jobs.html" %}
      </tbody>
    </table>
  </div>
  <!-- Execution History -->
  <div class="ht-card">
    <h2 class="ht-heading-5">
      <span class="ht-icon"><i class="fas fa-history"></i></span>
      <span>Execution History</span>
    </h2>
    <table class="ht-table ht-table--dense">
      <thead>
        <tr>
          <th>Job Name</th>
          <th>App</th>
          <th>Started</th>
          <th>Duration</th>
          <th>Status</th>
          <th>Error</th>
        </tr>
      </thead>
      <tbody id="scheduler-history"
             data-live-on-app="/ui/partials/scheduler-history">
        {% include "partials/scheduler_history.html" %}
      </tbody>
    </table>
  </div>
{% endblock %}
