package site

import "fmt"

type ModelBindingSignals struct {
	BindText      string `json:"text"`
	BindNumber    int    `json:"number"`
	BindBool      bool   `json:"bool"`
	BindSelection int    `json:"selection"`
}

templ ModelBindingView(optionCount int, signals *ModelBindingSignals) {
	<div
		id="container"
		class="flex flex-col gap-4"
		data-signals={ templ.JSONString(signals) }
	>
		<input class="input input-bordered" data-bind-text/>
		<input class="input input-bordered" type="number" data-bind-number/>
		<textarea class="textarea textarea-bordered" data-bind-text></textarea>
		<div class="form-control">
			<label class="label cursor-pointer">
				<span class="label-text">Checkbox</span>
				<input type="checkbox" checked="checked" class="checkbox" data-bind-bool/>
			</label>
		</div>
		<select class="select select-bordered" data-bind-selection>
			for i :=1 ; i <= optionCount; i++ {
				{{ str := fmt.Sprint(i) }}
				<option value={ str }>Option { str }</option>
			}
		</select>
		<div class="flex flex-col">
			for i := 1; i <= optionCount; i++ {
				{{ str := fmt.Sprint(i) }}
				<div class="form-control">
					<label class="label cursor-pointer">
						<span class="label-text">Option { str }</span>
						<input type="radio" class="radio" data-bind-selection value={ str }/>
					</label>
				</div>
			}
		</div>
		<code>
			<pre data-text="ctx.signals.JSON()"></pre>
		</code>
	</div>
}