{{ define "Form" }}
  <form hx-post="/tasks" hx-swap="outerHTML">
    <input
      id="title"
      name="title"
      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 mt-5"
    />
    <button
      type="submit"
      class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 focus:outline-none mt-2.5 text-center inline-flex items-center"
    >
      Add task
    </button>
  </form>
{{ end }}

{{ define "InnerItem" }}
  <div
    id="task-{{ .Item.ID }}"
    class="flex items-center justify-between bg-gray-100 rounded-lg px-4 py-2.5 transition"
  >
    <div class="flex items-center space-x-2.5">
      <button
        type="button"
        class="cursor-move text-gray-500 hover:text-gray-700 handle"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="w-6 h-6"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M3.75 9h16.5m-16.5 6.75h16.5"
          />
        </svg>
      </button>
      {{ if .Editing }}
        <form class="flex items-center justify-between flex-1">
          <div class="relative">
            <span class="absolute inset-y-0 right-2.5 flex items-center">
              <button class="text-blue-500 hover:text-blue-700">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  class="w-6 h-6"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M4.5 12.75l6 6 9-13.5"
                  />
                </svg>
              </button>
            </span>
            <input
              name="title"
              value="{{ .Item.Title }}"
              class="bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full px-2.5 py-1.5"
            />
          </div>
        </form>
      {{ else }}
        <p class="title">{{ .Item.Title }}</p>
      {{ end }}
    </div>

    <div class="flex items-center space-x-2.5">
      <button
        hx-delete="/tasks/{{ .Item.ID }}"
        hx-target="#task-{{ .Item.ID }}"
        hx-swap="outerHTML"
        type="button"
        class="text-red-500 hover:text-red-700"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="w-6 h-6"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M6 18L18 6M6 6l12 12"
          />
        </svg>
      </button>

      <button
        hx-get="/tasks/{{ .Item.ID }}/edit"
        hx-target="#task-{{ .Item.ID }}"
        hx-swap="outerHTML"
        type="button"
        class="edit text-blue-500 hover:text-blue-700"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="w-6 h-6"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
          />
        </svg>
      </button>

      <input
        type="checkbox"
        hx-put="/tasks/{{ .Item.ID }}/toggle"
        {{ if .Item.Completed }}checked{{ end }}
        class="w-5 h-5 text-blue-700 bg-white border-gray-300 rounded focus:ring-blue-600"
      />
    </div>
  </div>
{{ end }}

{{ define "Item" }}
  {{ if .SwapOOB }}
    <div hx-swap-oob="beforeend:#items">
      {{ template "InnerItem" . }}
    </div>
  {{ else }}
    {{ template "InnerItem" . }}
  {{ end }}
{{ end }}