package put

import "github.com/tigorlazuardi/redmage/views/utils"
import "fmt"

type NameInputData struct {
	Error             string
	Value             string
	DisableValidation bool
}

templ NameInput(data NameInputData) {
	<label id="name-input-form" class="form-control">
		<div class="label">
			<span
				class={ utils.CXX("label-text", true, "text-error", data.Error != "") }
			>Name</span>
		</div>
		<input
			id="name-input-field"
			if !data.DisableValidation {
				required
				x-data={ fmt.Sprintf(`{ init() { $el.setCustomValidity(%q) } }`, data.Error) }
				hx-get="/htmx/devices/add/validate/name"
				hx-include="[name='slug']"
				hx-trigger="change"
				hx-target="#name-input-form"
				hx-swap="outerHTML"
				placeholder="My Awesome Device"
			}
			name="name"
			type="text"
			class={ utils.CXX("input input-bordered", true, "input-error", data.Error != "") }
			value={ data.Value }
		/>
		<div class="label">
			if data.Error != "" {
				<span class="label-text text-error">{ data.Error }</span>
			} else {
				<span class="label-text">The display name for the device. You can use non-english characters for the name.</span>
			}
		</div>
	</label>
}