package clicktoload

import (
	"fmt"

	"examples/shared"
)

templ demo(users []user, page int) {
	<table class="table"><thead>
	<tr>
		<td>Name</td>
		<td>Email</td>
		<td>ID</td>
	</tr>
</thead><tbody>
	@tbody(users, page)
</tbody></table>
}

templ tbody(users []user, page int) {
	for _, u := range users {
		<tr>
			<td>{ u.name }</td>
			<td>{ u.email }</td>
			<td>{ u.id }</td>
		</tr>
	}
	@replaceMe(page)
}

templ replaceMe(page int) {
	<tr id="replaceMe">
		<td colspan="3"><button class="button is-black" hx-get={ "/click-to-load/contacts/?page="+fmt.Sprint(page+1) } hx-target="#replaceMe" hx-swap="outerHTML">Load More Agents...</button></td>
	</tr>
}

templ Index(users []user) {
	@shared.Layout("Click to Load") {
		<h2 class="title">Click to Load</h2>
		@demo(users, 1)
	}
}