Redmage/views/devices/put/name_input.templ

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, "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", 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>
}