gotodo/templates/todos.html

24 lines
877 B
HTML
Raw Normal View History

2023-09-04 16:29:16 +02:00
<ul id="todos" class="grid grid-cols-1 gap-2">
2023-09-03 02:12:43 +02:00
{{range $index, $task := . }}
2023-09-04 16:29:16 +02:00
<li id={{$task.Id}} class="p-4 shadow rounded-xl bg-slate-100">
<div class="flex flex-row">
<input class="px-2" type="checkbox" {{if $task.Completed}}checked{{end}}
hx-post="/toggle-todo/{{$index}}" hx-swap="outerHTML" hx-target="#todos">
<p class="mx-3">{{$task.Title}}</p>
<button class="px-4 rounded-xl bg-red-500"
hx-delete="/todo/{{$index}}" hx-swap="outerHTML" hx-target="#todos">X</button>
</div>
2023-09-03 02:12:43 +02:00
</li>
{{end}}
<li>
<form class="p-4 rounded-xl bg-slate-100" hx-post="/todos" hx-swap="outerHTML" hx-target="#todos">
<label class="flex p-4">
Title:
2023-09-04 16:29:16 +02:00
<input type="text" name="title" class="grow mx-2 px-2 bg-slate-200" ></input>
<button name="submit" class="px-4 rounded-xl bg-sky-500">Add</button>
2023-09-03 02:12:43 +02:00
</label>
</form>
</li>
</ul>