Timer create & delete

view/timers_list.templ

@@ -6,12 +6,41 @@ import (
 )
 
 templ timer(t model.Timer) {
-    <p><a href={ templ.URL(fmt.Sprint("/timer/", t.Id)) }>{ t.Name }</a></p>
+    <p class="timer-row">
+        <a href={ templ.URL(fmt.Sprint("/timer/", t.Id)) }>{ t.Name }</a>
+        -
+        <a
+            href="javascript:void(0);"
+            hx-delete={ fmt.Sprint("/timer/", t.Id) }
+            hx-target="closest .timer-row"
+        >Delete</a>
+    </p>
+}
+
+templ TimerCreateForm(timerName string, err string) {
+    <form
+        hx-put="/timer"
+        hx-target="closest .timers-list"
+        hx-target-error="this"
+    >
+        <p>
+            <input type="text" name="timerName" value={ timerName } placeholder="Name" />
+            <button type="submit">Create</button>
+        </p>
+        if err != "" {
+            <p class="error">{ err }</p>
+        }
+    </form>
 }
 
 templ TimersList(timers []model.Timer) {
-    <h1>Timers</h1>
-    for _, t := range timers {
-        @timer(t)
-    }
+    <div class="timers-list">
+        <h1>Timers</h1>
+        for _, t := range timers {
+            @timer(t)
+        }
+        <h4>Create timer</h4>
+        @TimerCreateForm("", "")
+    </div>
 }
+