Redmage/views/devicesview/adddevice/slug_input.templ

package adddevice

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

type SlugInputData struct {
	Error     string
	Value     string
	Valid     string
	HXSwapOOB bool
}

templ SlugInput(data SlugInputData) {
	<label
		id="slug-input-form"
		class="form-control"
		if data.HXSwapOOB {
			hx-swap-oob="true"
		}
	>
		<div class="label">
			<span
				class={ utils.CXX(
                    "label-text", true,
                    "text-error", data.Error != "",
                    "text-success", data.Valid != "",
                ) }
			>Slug</span>
		</div>
		<input
			id="slug-input-field"
			x-data={ fmt.Sprintf(`{ init() { $el.setCustomValidity(%q) } }`, data.Error) }
			name="slug"
			type="text"
			@change="$el.setCustomValidity('')"
			class={ utils.CXX(
                "input input-bordered", true,
                "text-error", data.Error != "",
                "text-success", data.Valid != "",
                "input-error", data.Error != "",
                "input-success", data.Valid != "",
            ) }
			hx-post="/htmx/devices/add/validate/slug"
			hx-trigger="change, input delay:2s"
			hx-target="#slug-input-form"
			hx-target-409="#slug-input-form"
			hx-swap="outerHTML"
			value={ data.Value }
			placeholder="my-awesome-device"
			title="Url Friendly Characters Only"
			pattern="^[a-z0-9-_]+$"
			required
		/>
		<div class="label">
			<span class={ utils.CXX("label-text", true, "text-error", data.Error != "", "text-success", data.Valid != "") }>
				if data.Valid != "" {
					{ data.Valid }
				} else if data.Error != "" {
					{ data.Error }
				} else {
					Unique identifier for the device.
					Value must be lowercase english alphabet and supported separator is only 'dash' (-) and 'underscores' (_).
				}
			</span>
		</div>
	</label>
}