Delete task and toggle edit state

templates/form.html

@@ -39,11 +39,47 @@
           />
         </svg>
       </button>
-      <p class="title">{{ .Item.Title }}</p>
+      {{ 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 type="button" class="text-red-500 hover:text-red-700">
+      <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"
@@ -60,7 +96,13 @@
         </svg>
       </button>
 
-      <button type="button" class="edit text-blue-500 hover:text-blue-700">
+      <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"