Popover

templ PopoverDemo() {
	@ui.Popover("", nil) {
		@ui.Button(ui.ButtonTypeButton, ui.ButtonVariantOutline, ui.ButtonSizeDefault, "", ui.PopoverTriggerAttrs) {
			Open popover
		}
		@ui.PopoverContent("w-80", nil) {
			<div class="grid gap-4">
				<div class="space-y-2">
					<h4 class="font-medium leading-none">Dimensions</h4>
					<p class="text-sm text-muted-foreground">
						Set the dimensions for the layer.
					</p>
				</div>
				<div class="grid gap-2">
					<div class="grid grid-cols-3 items-center gap-4">
						@ui.Label("", templ.Attributes{"for": "pop-width"}) {
							Width
						}
						@ui.Input("width", ui.InputTypeText, "col-span-2 h-8", templ.Attributes{"id": "pop-width", "value": "100%"})
					</div>
					<div class="grid grid-cols-3 items-center gap-4">
						@ui.Label("", templ.Attributes{"for": "pop-maxwidth"}) {
							Max. width
						}
						@ui.Input("maxWidth", ui.InputTypeText, "col-span-2 h-8", templ.Attributes{"id": "pop-maxwidth", "value": "300px"})
					</div>
					<div class="grid grid-cols-3 items-center gap-4">
						@ui.Label("", templ.Attributes{"for": "pop-height"}) {
							Height
						}
						@ui.Input("height", ui.InputTypeText, "col-span-2 h-8", templ.Attributes{"id": "pop-height", "value": "25px"})
					</div>
					<div class="grid grid-cols-3 items-center gap-4">
						@ui.Label("", templ.Attributes{"for": "pop-maxheight"}) {
							Max. height
						}
						@ui.Input("maxHeight", ui.InputTypeText, "col-span-2 h-8", templ.Attributes{"id": "pop-maxheight", "value": "none"})
					</div>
				</div>
			</div>
		}
	}
}