{% extends "layout.html" %}
{% block content %}
<div class="bg-white border rounded-xl shadow-sm overflow-hidden">
  <!-- Header / Toolbar -->
  <div class="px-5 py-4 border-b flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
    <div class="flex items-center gap-3">
      <div class="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-[#f06824]/10 text-[#f06824]">
        <!-- List icon -->
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
          <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h10" />
        </svg>
      </div>
      <div>
        <h2 class="text-lg font-semibold leading-tight">Tasks</h2>
        <p class="text-sm text-gray-500">{{ tasks|length }} total</p>
      </div>
    </div>

    <div class="flex gap-2 items-center">
      <form action="" method="get" class="hidden md:flex">
        <input name="q"
               value="{{ request.query_params.get('q') if request and request.query_params else '' }}"
               placeholder="Search by id, name, store…"
               class="w-64 rounded-l-lg border border-gray-200 bg-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[#f06824]/40"
               />
        <button class="rounded-r-lg bg-[#f06824] px-3 py-2 text-sm font-medium text-white hover:bg-[#e35d1e]">Search</button>
      </form>

      <button type="button"
              class="inline-flex items-center gap-2 rounded-lg bg-[#f06824] px-3 py-2 text-sm font-medium text-white hover:bg-[#e35d1e]"
              onclick="document.getElementById('add-modal').showModal()">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
          <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
        </svg>
        Add Task
      </button>

      <a href="{{ url_for('dashboard:tasks:index') }}"
         class="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm hover:bg-gray-50">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
          <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12h15" />
        </svg>
        Reset
      </a>
    </div>
  </div>

  <!-- Bulk actions (acts on checked rows inside the table partial) -->
  <div class="px-5 py-3 border-b bg-gray-50">
    <form id="bulk-form" class="flex flex-wrap gap-2 items-center"
          hx-post="hx/bulk/pause" hx-target="#tasks-table" hx-swap="innerHTML">
      <input type="hidden" name="ids" id="bulk-ids" value="" />
      <span class="text-sm text-gray-600 mr-2">With selected:</span>

      <button type="submit" class="inline-flex items-center gap-1 rounded-md border border-yellow-300 bg-yellow-50 px-3 py-1.5 text-sm font-medium text-yellow-800 hover:bg-yellow-100">Pause</button>

      <button type="button" class="inline-flex items-center gap-1 rounded-md border border-blue-300 bg-blue-50 px-3 py-1.5 text-sm font-medium text-blue-800 hover:bg-blue-100"
              onclick="submitBulk('hx/bulk/run')">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
          <path stroke-linecap="round" stroke-linejoin="round" d="M8 5v14l11-7z" />
        </svg>
        Run
      </button>

      <button type="button" class="inline-flex items-center gap-1 rounded-md border border-green-300 bg-green-50 px-3 py-1.5 text-sm font-medium text-green-800 hover:bg-green-100"
              onclick="submitBulk('hx/bulk/resume')">Resume</button>

      <button type="button" class="inline-flex items-center gap-1 rounded-md border border-red-300 bg-red-50 px-3 py-1.5 text-sm font-medium text-red-800 hover:bg-red-100"
              onclick="if(confirm('Remove selected tasks?')) submitBulk('hx/bulk/remove')">Remove</button>
    </form>
  </div>

  <!-- HTMX table container: auto-load + auto-refresh + target for swaps -->
  <div id="tasks-table" class="overflow-x-auto"
       hx-get="partials/table{% if q %}?q={{ q|urlencode }}{% endif %}"
       hx-trigger="load once, every 60s"
       hx-request="queue:last"
       hx-swap="innerHTML">
    {% include "tasks/_table.html" %}
  </div>
</div>

<!-- Add Task Modal -->
<dialog id="add-modal" class="rounded-xl p-0 backdrop:bg-black/30">
  <form method="dialog" class="absolute right-3 top-2">
    <button class="rounded-md border bg-white px-2 py-1 text-xs">Close</button>
  </form>
  <div class="w-[64rem] max-w-[90vw] p-5">
    <h3 class="text-lg font-semibold mb-3">Add task</h3>
    <form hx-post="create" hx-target="#tasks-table" hx-swap="outerHTML" onsubmit="document.getElementById('add-modal').close()">
      <label class="block text-sm text-gray-600 mb-1">Callable (pkg.mod:func)</label>
      <input name="callable_path" required placeholder="myapp.jobs:ping"
             class="w-full rounded-lg border border-gray-200 px-3 py-2 mb-3" />

      <div class="grid grid-cols-2 gap-3">
        <div>
          <label class="block text-sm text-gray-600 mb-1">Name</label>
          <input name="name" placeholder="human-readable name" class="w-full rounded-lg border border-gray-200 px-3 py-2" />
        </div>
        <div>
          <label class="block text-sm text-gray-600 mb-1">Store alias</label>
          <input name="store" placeholder="default" class="w-full rounded-lg border border-gray-200 px-3 py-2" />
        </div>
      </div>

      <div class="grid grid-cols-2 gap-3 mt-3">
        <div>
          <label class="block text-sm text-gray-600 mb-1">Trigger type</label>
          <select name="trigger_type" class="w-full rounded-lg border border-gray-200 px-3 py-2">
            <option value="interval">interval</option>
            <option value="cron">cron</option>
            <option value="date">date</option>
          </select>
        </div>
        <div>
          <label class="block text-sm text-gray-600 mb-1">Trigger value</label>
          <input name="trigger_value" placeholder="10s | */5 * * * * | 2026-01-01T10:00:00" class="w-full rounded-lg border border-gray-200 px-3 py-2" />
        </div>
      </div>

      <div class="grid grid-cols-2 gap-3 mt-3">
        <div>
          <label class="block text-sm text-gray-600 mb-1">*args (JSON)</label>
          <input name="args" placeholder='["a", 123]' class="w-full rounded-lg border border-gray-200 px-3 py-2" />
        </div>
        <div>
          <label class="block text-sm text-gray-600 mb-1">**kwargs (JSON)</label>
          <input name="kwargs" placeholder='{"flag": true, "x": 7}' class="w-full rounded-lg border border-gray-200 px-3 py-2" />
        </div>
      </div>

      <div class="mt-4 flex justify-end gap-2">
        <button type="button" class="rounded-lg border px-3 py-2 text-sm" onclick="document.getElementById('add-modal').close()">Cancel</button>
        <button type="submit" class="rounded-lg bg-[#f06824] px-3 py-2 text-sm font-medium text-white hover:bg-[#e35d1e]">Create</button>
      </div>
    </form>
  </div>
</dialog>

<script>
  // Collect selected rows into the hidden bulk input
  function gatherSelected() {
    const ids = Array.from(document.querySelectorAll('input[name="row"]:checked')).map(x => x.value);
    const el = document.getElementById('bulk-ids');
    if (el) el.value = JSON.stringify(ids);
    return ids;
  }
  function submitBulk(url) {
    const ids = gatherSelected();
    if (!ids.length) return;
    const form = document.getElementById('bulk-form');
    form.setAttribute('hx-post', url);
    form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
  }
</script>
{% endblock %}