{% extends "layout.html" %}
{% block head_content %}
<div class="border-b border-gray-200" x-data="{ current_id: '{{ current_list_type }}'}">
  <nav class="-mb-px flex space-x-8" aria-label="Tabs">
    {% for item in list_types %}
    <a href="?task_type={{ item.id }}"
       class="whitespace-nowrap border-b-2 py-2 px-1 text-sm font-medium"
       x-bind:class="current_id == '{{ item.id }}'
         ? 'border-indigo-500 text-indigo-600'
         : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'"
        aria-current="page"
    >
      {{ item.title }}
      <span class="inline-flex items-center rounded-full ml-1 px-1.5 py-0.5 text-xs font-medium"
        x-bind:class="'{{item.id}}' == 'running' ? 'bg-purple-100 text-purple-700' : 'bg-gray-100 text-gray-500'"
        hx-post="/api/task-count"
        hx-vals='{"task_type": "{{ item.id }}"}'
        hx-trigger="load,every 2s"
        hx-swap="innerHTML"
        mustache-template="scalar-value"
      ></span>
    </a>
    {% endfor %}
  </nav>
</div>
{% endblock %}
{% block content %}
{% if current_list_type == "running" %}
<div class="flex space-x-2 divide-x divide-gray-200">
  <div class="py-2 px-2">
    <div class="relative">
      <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
        <svg fill="none" viewBox="0 0 24 24" stroke-width="2.0" stroke="currentColor" class="w-5 h-5 text-gray-400">
          <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
        </svg>
      </div>
      <input type="text" id="filter-keyword" placeholder="Coro/name filter"
        class="inline-flex w-60 rounded-md border-0 py-1 pl-10 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
        hx-trigger="keyup changed delay:300ms"
        hx-target="#list-body"
        hx-post="/api/live-tasks"
        hx-swap="innerHTML"
        hx-vals="js:{
          persistent: Alpine.store('filters').persistent,
          filter: document.getElementById('filter-keyword').value,
        }"
        mustache-template="live-task-list"
      >
    </div>
  </div>
  <div class="flex items-center gap-x-3 py-2 px-2">
    <label for="filter-persistent" class="block text-sm font-medium leading-6 text-gray-900">Show persistent tasks only</label>
    <button type="button" id="filter-persistent"
      x-data
      class="bg-gray-200 relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2"
      x-bind:class="$store.filters.persistent ? 'bg-indigo-600' : 'bg-gray-200'"
      x-bind:aria-checked="$store.filters.persistent"
      @click="$store.filters.persistent = ! $store.filters.persistent; htmx.trigger(document.getElementById('list-body'), 'refresh', {});"
      role="switch"
    >
      <span class="sr-only">Toggle the persistent task filter</span>
      <span aria-hidden="true"
        class="translate-x-0 pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
        x-bind:class="$store.filters.persistent ? 'translate-x-5' : 'translate-x-0'"
      ></span>
    </button>
  </div>
</div>
<div class="px-4 sm:px-6 lg:px-8">
  <div class="mt-8 flow-root">
    <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
      <div class="inline-block min-w-full px-0 py-2 align-middle">
        <table class="min-w-full divide-y divide-gray-300">
          <thead>
            <tr>
              <th scope="col" class="py-2.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-0">Task ID</th>
              <th scope="col" class="px-1 py-2.5 text-left text-sm font-semibold text-gray-900">State</th>
              <th scope="col" class="px-1 py-2.5 text-left text-sm font-semibold text-gray-900">Name</th>
              <th scope="col" class="px-1 py-2.5 text-left text-sm font-semibold text-gray-900">Coroutine</th>
              <th scope="col" class="px-1 py-2.5 text-left text-sm font-semibold text-gray-900">Created Loc.</th>
              <th scope="col" class="px-1 py-2.5 text-left text-sm font-semibold text-gray-900">Since</th>
              <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-0">
                <span class="sr-only">Action</span>
              </th>
            </tr>
          </thead>
          <tbody id="list-body" class="divide-y divide-gray-200"
            hx-trigger="load,every 2s,refresh from:body"
            hx-post="/api/live-tasks"
            hx-swap="innerHTML"
            hx-vals="js:{
              persistent: Alpine.store('filters').persistent,
              filter: document.getElementById('filter-keyword').value,
            }"
            mustache-template="live-task-list"
          >
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

{% raw %}
<template id="live-task-list">
{{# tasks}}
<tr>
  <td class="whitespace-nowrap px-1 py-2 text-sm font-medium text-gray-900">{{ task_id }}</td>
  <td class="whitespace-nowrap px-1 py-2 text-sm text-gray-500">{{ state }}</td>
  <td class="whitespace-nowrap px-1 py-2 text-sm text-gray-500">{{ name }}</td>
  <td class="whitespace-nowrap px-1 py-2 font-mono text-xs text-gray-500">{{ coro }}</td>
  <td class="break-all px-1 py-2 font-mono text-xs text-gray-500">{{ created_location }}</td>
  <td class="whitespace-nowrap px-1 py-2 font-mono text-sm text-gray-500">{{ since }}</td>
  <td class="relative whitespace-nowrap px-1 py-2 text-right text-sm font-medium sm:pr-0">
    {{^is_root}}
    <button
      type="button"
      class="notify-result rounded bg-rose-600 px-2 py-1 text-xs font-semibold text-white shadow-sm hover:bg-rose-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-rose-600 disabled:opacity-50"
      hx-delete="/api/task"
      hx-params="not persistent,filter"
      hx-vals='{"task_id": "{{ task_id }}"}'
      hx-swap="none"
      hx-sync="closest tbody:drop"
      onclick="this.disabled=true"
      >Cancel<img src="/static/loader.svg" class="htmx-indicator button-indicator ml-2 w-3 h-3" /></button>
    {{/is_root}}
    <a
      type="button"
      class="cursor-pointer rounded bg-indigo-600 px-2 py-1 text-xs font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
      href="/trace-running?task_id={{ task_id }}"
    >Trace</a>
  </td>
</tr>
{{/ tasks}}
</template>
{% endraw %}

{% elif current_list_type == "terminated" %}

<div class="flex space-x-2 divide-x divide-gray-200">
  <div class="py-2 px-2">
    <div class="relative">
      <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
        <svg fill="none" viewBox="0 0 24 24" stroke-width="2.0" stroke="currentColor" class="w-5 h-5 text-gray-400">
          <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
        </svg>
      </div>
      <input type="text" id="filter-keyword" placeholder="Coro/name filter"
        class="inline-flex w-60 rounded-md border-0 py-1 pl-10 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
        hx-trigger="keyup changed delay:300ms"
        hx-target="#list-body"
        hx-post="/api/terminated-tasks"
        hx-swap="innerHTML"
        hx-vals="js:{
          persistent: Alpine.store('filters').persistent,
          filter: document.getElementById('filter-keyword').value,
        }"
        mustache-template="terminated-task-list"
      >
    </div>
  </div>
  <div class="flex items-center gap-x-3 py-2 px-2">
    <label for="filter-persistent" class="block text-sm font-medium leading-6 text-gray-900">Show persistent tasks only</label>
    <button type="button" id="filter-persistent"
      x-data
      class="bg-gray-200 relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2"
      x-bind:class="$store.filters.persistent ? 'bg-indigo-600' : 'bg-gray-200'"
      x-bind:aria-checked="$store.filters.persistent"
      @click="$store.filters.persistent = ! $store.filters.persistent; htmx.trigger(document.getElementById('list-body'), 'refresh', {});"
      role="switch"
    >
      <span class="sr-only">Toggle the persistent task filter</span>
      <span aria-hidden="true"
        class="translate-x-0 pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
        x-bind:class="$store.filters.persistent ? 'translate-x-5' : 'translate-x-0'"
      ></span>
    </button>
  </div>
</div>
<div class="px-4 sm:px-6 lg:px-8">
  <div class="mt-8 flow-root">
    <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
      <div class="inline-block min-w-full px-0 py-2 align-middle">
        <table class="min-w-full divide-y divide-gray-300">
          <thead>
            <tr>
              <th scope="col" class="py-2.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-0">Task ID</th>
              <th scope="col" class="px-1 py-2.5 text-left text-sm font-semibold text-gray-900">Name</th>
              <th scope="col" class="px-1 py-2.5 text-left text-sm font-semibold text-gray-900">Coroutine</th>
              <th scope="col" class="px-1 py-2.5 text-left text-sm font-semibold text-gray-900">Since Started</th>
              <th scope="col" class="px-1 py-2.5 text-left text-sm font-semibold text-gray-900">Since Terminated</th>
              <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-0">
                <span class="sr-only">Action</span>
              </th>
            </tr>
          </thead>
          <tbody id="list-body" class="divide-y divide-gray-200"
            hx-trigger="load,every 2s,refresh from:body"
            hx-post="/api/terminated-tasks"
            hx-swap="innerHTML"
            hx-vals="js:{
              persistent: Alpine.store('filters').persistent,
              filter: document.getElementById('filter-keyword').value,
            }"
            mustache-template="terminated-task-list"
          >
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

{% raw %}
<template id="terminated-task-list">
{{# tasks}}
<tr>
  <td class="whitespace-nowrap px-1 py-2 text-sm font-medium text-gray-900">{{ task_id }}</td>
  <td class="whitespace-nowrap px-1 py-2 text-sm text-gray-500">{{ name }}</td>
  <td class="whitespace-nowrap px-1 py-2 font-mono text-xs text-gray-500">{{ coro }}</td>
  <td class="whitespace-nowrap px-1 py-2 font-mono text-sm text-gray-500">{{ started_since }}</td>
  <td class="whitespace-nowrap px-1 py-2 font-mono text-sm text-gray-500">{{ terminated_since }}</td>
  <td class="relative whitespace-nowrap px-1 py-2 text-right text-sm font-medium sm:pr-0">
    <a
      type="button"
      class="cursor-pointer rounded bg-indigo-600 px-2 py-1 text-xs font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
      href="/trace-terminated?task_id={{ task_id }}"
    >Trace</a>
  </td>
</tr>
{{/ tasks}}
</template>
{% endraw %}
{% endif %}
<script type="text/javascript">
  document.addEventListener("alpine:init", () => {
    Alpine.store("filters", {
      persistent: false,
    });
    console.log("init filters")
  });
</script>
{% endblock %}
