package csrf

import (
	"fmt"

	"examples/shared"
)

templ Display(u user) {
	<div hx-target="this" hx-swap="outerHTML">
		<div><label>First Name</label>: { u.firstName }</div>
		<div><label>Last Name</label>: { u.lastName }</div>
		<div><label>Email</label>: { u.email }</div>
		<button hx-get="/csrf/contact/1/edit" class="button is-black">Click To Edit</button>
	</div>
}

templ Form(u user, csrfToken string) {
	<form hx-put="/csrf/contact/1" hx-headers={ fmt.Sprintf(`{"X-CSRF-Token": %q}`, csrfToken) } hx-target="this" hx-swap="outerHTML">
		<div class="field">
			<div class="control"><label>First Name</label><input class="input" type="text" name="firstName" value={ u.firstName }/></div>
		</div>
		<div class="field">
			<div class="control"><label>Last Name</label><input class="input" type="text" name="lastName" value={ u.lastName }/></div>
		</div>
		<div class="field">
			<div class="control"><label>Email Address</label><input class="input" type="email" name="email" value={ u.email }/></div>
		</div>
		<div class="field is-grouped">
			<div class="control"><button class="button is-black">Submit</button></div>
			<div class="control"><button class="button" hx-get="/csrf">Cancel</button></div>
		</div>
	</form>
}

templ Index(u user) {
	@shared.Layout("Click to Edit") {
		<h2 class="title">Click to Edit</h2>
		@Display(u)
	}
}