{% extends "layout.html" %}
{% block content %}
<div class="az-page az-task-page" x-data="asynczTasks">
  <section class="az-stat-grid">
    <article class="az-stat-card az-stat-card--accent">
      <div class="az-stat-label">Visible</div>
      <div class="az-stat-value">{{ visible_tasks }}</div>
      <div class="az-stat-detail">{{ total_tasks }} total tasks</div>
    </article>
    <article class="az-stat-card az-stat-card--success">
      <div class="az-stat-label">Scheduled</div>
      <div class="az-stat-value">{{ scheduled_tasks }}</div>
      <div class="az-stat-detail">Normal trigger execution</div>
    </article>
    <article class="az-stat-card az-stat-card--warning">
      <div class="az-stat-label">Paused</div>
      <div class="az-stat-value">{{ paused_tasks }}</div>
      <div class="az-stat-detail">Can be resumed or manually run</div>
    </article>
    <article class="az-stat-card">
      <div class="az-stat-label">Pending</div>
      <div class="az-stat-value">{{ pending_tasks }}</div>
      <div class="az-stat-detail">Waiting for store commit</div>
    </article>
  </section>

  <section class="az-panel">
    <div class="az-panel-header">
      <div>
        <h2 class="az-panel-title">Tasks</h2>
        <div class="az-panel-meta">Inspect, filter, pause, resume, remove, or run a task immediately.</div>
      </div>
      <div class="az-task-toolbar">
        <div class="az-segmented" role="group" aria-label="Table density">
          <button type="button" class="az-segment-button" x-bind:aria-pressed="comfortableDensity" x-on:click="setDensityComfortable">Comfort</button>
          <button type="button" class="az-segment-button" x-bind:aria-pressed="compactDensity" x-on:click="setDensityCompact">Compact</button>
        </div>
        <div class="az-actions">
          <button type="button" class="az-button" x-on:click="toggleFilters" x-bind:aria-expanded="filtersOpen">Filters</button>
          <a href="{{ url_for('dashboard:tasks:index') }}" class="az-button">Reset</a>
          <button type="button" class="az-button az-button--primary" x-on:click="openAddTask">
            Add Task
          </button>
        </div>
      </div>
    </div>

    <form action="" method="get" class="az-filter-bar" x-show="filtersOpen">
      <label class="az-field az-field--search">
        <span>Search</span>
        <input
          name="q"
          value="{{ filters.q }}"
          placeholder="id, name, callable, trigger..."
          class="az-input"
        />
      </label>
      <label class="az-field">
        <span>State</span>
        <select name="state" class="az-select">
          <option value="">Any state</option>
          <option value="scheduled" {% if filters.state == "scheduled" %}selected{% endif %}>Scheduled</option>
          <option value="paused" {% if filters.state == "paused" %}selected{% endif %}>Paused</option>
          <option value="pending" {% if filters.state == "pending" %}selected{% endif %}>Pending</option>
        </select>
      </label>
      <label class="az-field">
        <span>Executor</span>
        <select name="executor" class="az-select">
          <option value="">Any executor</option>
          {% for executor in available_executors %}
            <option value="{{ executor }}" {% if filters.executor == executor %}selected{% endif %}>{{ executor }}</option>
          {% endfor %}
        </select>
      </label>
      <label class="az-field">
        <span>Trigger</span>
        <select name="trigger" class="az-select">
          <option value="">Any trigger</option>
          {% for trigger in available_triggers %}
            <option value="{{ trigger }}" {% if filters.trigger == trigger %}selected{% endif %}>{{ trigger }}</option>
          {% endfor %}
        </select>
      </label>
      <label class="az-field">
        <span>Sort</span>
        <select name="sort" class="az-select">
          <option value="next_run_time" {% if filters.sort == "next_run_time" %}selected{% endif %}>Next run</option>
          <option value="name" {% if filters.sort == "name" %}selected{% endif %}>Name</option>
          <option value="schedule_state" {% if filters.sort == "schedule_state" %}selected{% endif %}>State</option>
          <option value="trigger" {% if filters.sort == "trigger" %}selected{% endif %}>Trigger</option>
        </select>
      </label>
      <label class="az-field">
        <span>Direction</span>
        <select name="direction" class="az-select">
          <option value="asc" {% if filters.direction == "asc" %}selected{% endif %}>Ascending</option>
          <option value="desc" {% if filters.direction == "desc" %}selected{% endif %}>Descending</option>
        </select>
      </label>
      <label class="az-field">
        <span>Rows</span>
        <select name="per_page" class="az-select">
          {% for option in pagination.page_size_options %}
            <option value="{{ option }}" {% if filters.per_page == option %}selected{% endif %}>{{ option }}</option>
          {% endfor %}
        </select>
      </label>
      <button class="az-button az-button--primary">Apply</button>
    </form>

    <div class="az-filter-bar az-bulk-bar">
      <div id="bulk-form" class="az-actions">
        <input type="hidden" name="ids" id="bulk-ids" x-bind:value="selectedPayload" />
        <span class="az-bulk-selection" x-text="selectedLabel">0 selected</span>
        <button type="button" class="az-button az-button--primary"
                hx-post="hx/bulk/run{{ query_suffix }}" hx-target="#tasks-table" hx-swap="innerHTML"
                hx-include="#bulk-ids" x-on:click="refreshSelection" x-bind:disabled="noSelection">Run now</button>
        <button type="button" class="az-button az-button--warning"
                hx-post="hx/bulk/pause{{ query_suffix }}" hx-target="#tasks-table" hx-swap="innerHTML"
                hx-include="#bulk-ids" x-on:click="refreshSelection" x-bind:disabled="noSelection">Pause</button>
        <button type="button" class="az-button az-button--success"
                hx-post="hx/bulk/resume{{ query_suffix }}" hx-target="#tasks-table" hx-swap="innerHTML"
                hx-include="#bulk-ids" x-on:click="refreshSelection" x-bind:disabled="noSelection">Resume</button>
        <button type="button" class="az-button az-button--danger"
                hx-post="hx/bulk/remove{{ query_suffix }}" hx-target="#tasks-table" hx-swap="innerHTML"
                hx-include="#bulk-ids" hx-confirm="Remove selected tasks?"
                x-on:click="refreshSelection" x-bind:disabled="noSelection">Remove</button>
      </div>
    </div>

    <div id="tasks-table" class="az-table-wrap az-table-wrap--resizable az-table-wrap--sticky-actions"
         hx-get="partials/table{{ query_suffix }}"
         hx-trigger="load once, every 60s"
         hx-sync="this:replace"
         hx-swap="innerHTML">
      {% include "tasks/_table.html" %}
    </div>
  </section>

  <dialog id="add-modal" class="az-modal">
    <div class="az-modal-header">
      <div>
        <h3 class="az-panel-title">Add task</h3>
        <div class="az-panel-meta">Create a scheduled callable using Asyncz triggers.</div>
      </div>
      <button type="button" class="az-icon-button" aria-label="Close" title="Close" x-on:click="closeAddTask">x</button>
    </div>
    <form hx-post="create" hx-target="#tasks-table" hx-swap="outerHTML" x-on:submit="closeAddTask">
      <div class="az-modal-body">
        <label class="az-field">
          <span>Callable</span>
          <input name="callable_path" required placeholder="myapp.jobs:ping" class="az-input" />
        </label>

        <div class="az-form-grid az-form-grid--spaced">
          <label class="az-field">
            <span>Name</span>
            <input name="name" placeholder="Human-readable name" class="az-input" />
          </label>
          <label class="az-field">
            <span>Store alias</span>
            <input name="store" placeholder="default" class="az-input" />
          </label>
          <label class="az-field">
            <span>Trigger type</span>
            <select name="trigger_type" class="az-select">
              <option value="interval">interval</option>
              <option value="cron">cron</option>
              <option value="date">date</option>
            </select>
          </label>
          <label class="az-field">
            <span>Trigger value</span>
            <input name="trigger_value" placeholder="10s | */5 * * * * | 2026-01-01T10:00:00" class="az-input" />
          </label>
          <label class="az-field">
            <span>*args (JSON)</span>
            <input name="args" placeholder='["a", 123]' class="az-input" />
          </label>
          <label class="az-field">
            <span>**kwargs (JSON)</span>
            <input name="kwargs" placeholder='{"flag": true, "x": 7}' class="az-input" />
          </label>
        </div>
      </div>
      <div class="az-form-actions">
        <button type="button" class="az-button" x-on:click="closeAddTask">Cancel</button>
        <button type="submit" class="az-button az-button--primary">Create</button>
      </div>
    </form>
  </dialog>
</div>
{% endblock %}