package components

import "fmt"

//EditableFieldText() gives an Input field to write text into
templ EditableFieldText(target string, label string, content string) {
	<form hx-post={ fmt.Sprint(templ.URL(target)) } hx-target="this" hx-swap="outerHTML">
		<div class="field">
			<label class="label">{ label }</label>
			<div class="control">
				<input class="input" type="text" name="value" value={ content }/>
			</div>
		</div>
	</form>
}

//EditableFieldInt() gives an Input field to write text into
templ EditableFieldInt(target string, label string, content int) {
	<form hx-post={ fmt.Sprint(templ.URL(target)) } hx-target="this" hx-swap="outerHTML">
		<div class="field">
			<label class="label">{ label }</label>
			<div class="control">
				<input class="input" type="number" name="value" value={ fmt.Sprint(content) }/>
			</div>
			<span class="material-icons icon is-small is-left">save</span>
		</div>
	</form>
}

//EditableField() is a generic component to make a single field editable
templ EditableField(target string, label string, content any) {
	<div class="field" hx-target="this" hx-swap="outerHTML">
		<label class="label">{ label }</label>
		<div class="control">
			<span class="input">{ fmt.Sprint(content) }</span>
			<span class="material-icons icon is-small is-left">edit</span>
		</div>
	</div>
}