fieldset.templ

package popui

import (
	"github.com/invopop/popui.go/classes"
	"github.com/invopop/popui.go/props"
	"github.com/invopop/popui.go/tailwind"
)

// Fieldset groups a set of form fields together with correct vertical spacing and padding
// between fields. If the Variant is set to "card" it will also add a border and background
// to the fieldset to visually separate it from the rest of the form.
templ Fieldset(p ...props.Fieldset) {
	{{ fieldset := props.First(p) }}
	<fieldset
		if fieldset.ID != "" {
			id={ fieldset.ID }
		}
		class={
			tailwind.Merge(
				"relative w-full flex-1 flex flex-col gap-4",
				classes.If(fieldset.Variant == props.FieldsetVariantCard, "border border-border-default-secondary rounded-md bg-background p-4"),
				fieldset.Class,
			),
		}
		{ fieldset.Attributes... }
	>
		if fieldset.Legend != "" {
			<legend class="float-left text-lg font-medium text-foreground">
				{ fieldset.Legend }
			</legend>
		}
		{ children... }
	</fieldset>
}