package view

import (
	"git.wittern.io/public/echo-todos/model"
	"strconv"
)

templ TodoForm() {
	<form hx-on::after-request="this.reset()" hx-post="/todos" hx-target="#todoslist">
		<fieldset role="group">
			<input type="text" name="todo" required/><input value="Clear" type="reset"/>
			<button type="submit">Add</button>
		</fieldset>
	</form>
}

templ TodosList(todos []model.Todo) {
	<table class="striped" id="todoslist">
		<thead>
			<tr>
				<th>Title</th>
				<th>Done</th>
				<th>Delete</th>
			</tr>
		</thead>
		<tbody>
			for _, todo := range todos {
				@TodoRow(todo)
			}
		</tbody>
	</table>
}

templ TodoRow(todo model.Todo) {
	<tr id={ "todo-" + strconv.Itoa(todo.ID) }>
		<td>{ todo.Title }</td>
		if todo.Done {
			<td><input hx-put={ "/todos/todo-" + strconv.Itoa(todo.ID) } hx-target="#todoslist" type="checkbox" name="done" checked/></td>
		} else {
			<td><input hx-put={ "/todos/todo-" + strconv.Itoa(todo.ID) } hx-target="#todoslist" type="checkbox" name="done"/></td>
		}
		<td><button hx-delete={ "/todos/todo-" + strconv.Itoa(todo.ID) } hx-target={ "#todo-" + strconv.Itoa(todo.ID) } hx-swap="delete">Delete</button></td>
	</tr>
}

templ ErrorPage(message string) {
	@Base() {
		<container>
			<h1>{ message }</h1>
		</container>
	}
}

templ Hero(AppTitle string) {
	@Centered() {
		<div class="hero">
			<h1>{ AppTitle }</h1>
		</div>
	}
}

templ Centered() {
	<div id="centered-div" class="container centered">
		{ children... }
	</div>
}