// templui component toggle - version: v0.84.0 installed by templui v0.84.0
package toggle

import "git.jmbit.de/jmb/scanfile/server/web/templui/utils"

type Props struct {
	ID         string
	Class      string
	Attributes templ.Attributes
	Name       string
	Disabled   bool
	Checked    bool
}

templ Toggle(props ...Props) {
	{{ var p Props }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	if p.ID == "" {
		{{ p.ID = utils.RandomID() }}
	}
	<label
		for={ p.ID }
		class={ utils.TwMerge(
			"inline-flex cursor-pointer items-center gap-2",
			utils.If(p.Disabled, "cursor-not-allowed"),
		) }
	>
		<!-- Actual checkbox toggle -->
		<input
			x-ref={ p.ID }
			id={ p.ID }
			if p.Name != "" {
				name={ p.Name }
			}
			type="checkbox"
			value="true"
			checked?={ p.Checked }
			disabled?={ p.Disabled }
			class="peer hidden"
			role="switch"
			{ p.Attributes... }
		/>
		<!-- Hidden fallback value to ensure "false" is sent when not checked -->
		<input
			type="hidden"
			if p.Name != "" {
				name={ p.Name }
			}
			value="false"
		/>
		<!-- Visual toggle UI -->
		<div
			class={
				utils.TwMerge(
					"relative h-6 w-10",
					"after:absolute after:left-0.5 after:top-0.5",
					"after:h-5 after:w-5",
					"rounded-full bg-neutral-200",
					"after:rounded-full after:bg-muted-foreground",
					"after:content-['']",
					"after:transition-all",
					"peer-checked:bg-primary",
					"peer-checked:after:translate-x-[16px]",
					"peer-checked:after:bg-secondary",
					"peer-disabled:opacity-50",
					p.Class,
				),
			}
			aria-hidden="true"
		></div>
	</label>
}