Changes

templates/form.html

@@ -0,0 +1,98 @@
+{{ 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>
+      <p class="title">{{ .Item.Title }}</p>
+    </div>
+
+    <div class="flex items-center space-x-2.5">
+      <button 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 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 }}