Redmage/views/subredditsview/addview/name.templ

package addview

import "github.com/tigorlazuardi/redmage/views/utils"
import "github.com/tigorlazuardi/redmage/api/reddit"

type SubredditInputData struct {
	Value     string
	Error     string
	Valid     bool
	Type      reddit.SubredditType
	HXSwapOOB string
}

templ SubredditInputForm(data SubredditInputData) {
	<label
		id="subreddit-input"
		class="form-control w-full"
		hx-post="/htmx/subreddits/check"
		hx-target-error="this"
		hx-trigger="input delay:1s, on-demand"
		hx-include="[name='type']"
		hx-swap="outerHTML"
		hx-swap-oob={ data.HXSwapOOB }
	>
		<div class="label">
			<span
				class={ utils.CX(map[string]bool{
                        "label-text": true,
                        "text-error": data.Error != "",
                        "text-success": data.Valid,
                        "text-base": true,
                    }) }
			>Subreddit Name</span>
		</div>
		<input
			type="text"
			id="name"
			name="name"
			value={ data.Value }
			placeholder="e.g. 'wallpaper' or 'EarthPorn'"
			class={ utils.CX(map[string]bool{
                "input": true,
                "input-bordered": true,
                "input-error": data.Error != "",
                "text-error": data.Error != "",
                "input-success": data.Valid,
                "text-success": data.Valid,
            }) }
			required
			data-error={ data.Error }
			hx-on::load="this.setCustomValidity(this.getAttribute('data-error'))"
		/>
		<div class="label">
			<span
				class={ utils.CX(map[string]bool{
                            "label-text": true,
                            "text-error": data.Error != "",
                            "text-success": data.Valid,
                            "min-h-[1rem]": true,
                        }) }
			>
				if data.Valid {
					if data.Type == reddit.SubredditTypeUser {
						Username target is valid
					} else {
						Subreddit is valid
					}
				} else {
					{ data.Error }
				}
			</span>
		</div>
	</label>
}