package bulkupdate

import (
	"fmt"

	"examples/shared"
)

templ demo(users []user) {
	<h3 class="subtitle">Select Rows And Activate Or Deactivate Below</h3>
	<form id="checked-contacts">
		<table class="table">
			<thead>
				<tr>
					<td></td>
					<td>Name</td>
					<td>Email</td>
					<td>Status</td>
				</tr>
			</thead>
			@tbody(users, map[int]bool{})
		</table>
	</form>
	<div hx-swap="outerHTML" hx-include="#checked-contacts" hx-target="#tbody" class="field is-grouped">
		<div class="control"><a class="button is-black" hx-put="/bulk-update/activate">Activate</a></div>
		<div class="control"><a class="button" hx-put="/bulk-update/deactivate">Deactivate</a></div>
	</div>
	<style>
		  .htmx-settling tr.deactivate td {
		    background: lightcoral;
		  }
		  .htmx-settling tr.activate td {
		    background: darkseagreen;
		  }
		  tr td {
		    transition: all 1.2s;
		  }
	</style>
}

templ tbody(users []user, modified map[int]bool) {
	<tbody id="tbody">
		for k, u := range users {
			<tr
				if modified[k] && u.active {
					class="activate"
				}

				if modified[k] && !u.active {
					class="deactivate"
				}
				>
				<td><input type="checkbox" name="ids" value={ fmt.Sprint(k) }/></td>
				<td>{ u.name }</td>
				<td>{ u.email }</td>
				<td>
					if u.active {
						Active
					} else {
						Inactive
					}
				</td>
			</tr>
		}
	</tbody>
}

templ Index(users []user) {
	@shared.Layout("Bulk Update") {
		<h2 class="title">Bulk Update</h2>
		@demo(users)
	}
}