45 lines
1.2 KiB
Plaintext
45 lines
1.2 KiB
Plaintext
package put
|
|
|
|
import "github.com/tigorlazuardi/redmage/views/utils"
|
|
import "fmt"
|
|
|
|
type NameInputData struct {
|
|
Error string
|
|
Value string
|
|
EditMode bool
|
|
}
|
|
|
|
templ NameInput(data NameInputData) {
|
|
<label id="name-input-form" class={ utils.CXX("form-control", true, "sm:col-span-2", data.EditMode) }>
|
|
<div class="label">
|
|
<span
|
|
class={ utils.CXX("label-text", true, "text-error", data.Error != "") }
|
|
>Name</span>
|
|
</div>
|
|
<input
|
|
id="name-input-field"
|
|
if !data.EditMode {
|
|
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 w-full", true, "input-error", data.Error != "", "sm:col-span-2", data.EditMode) }
|
|
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>
|
|
}
|