Redmage/views/devicesview/put/slug_input.templ

package put

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

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

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 Identifier</span>
		</div>
		<input
			id="slug-input-field"
			if !data.Disabled {
				x-data={ fmt.Sprintf(`{ init() { $el.setCustomValidity(%q) } }`, data.Error) }
			}
			name="slug"
			type="text"
			if !data.Disabled {
				@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 != "",
            ) }
			if data.Disabled {
				disabled
			} else {
				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"
				placeholder="my-awesome-device"
				title="Url Friendly Characters Only"
				required
			}
			value={ data.Value }
		/>
		<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 if data.DisabledText != "" {
					{ data.DisabledText }
				} else {
					URL friendly Unique identifier for the device.
					Value must be lowercase english alphabet and supported separator is only 'dash' (-) and 'underscores' (_).
				}
			</span>
		</div>
	</label>
}