Sheet

templ SheetDemo() {
	@ui.Sheet("", nil) {
		@ui.Button(ui.ButtonTypeButton, ui.ButtonVariantOutline, ui.ButtonSizeDefault, "", ui.SheetTriggerAttrs) {
			Open
		}
		@ui.SheetContent(ui.SheetSideRight, "", nil) {
			@ui.SheetHeader("", nil) {
				@ui.SheetTitle("", nil) {
					Edit profile
				}
				@ui.SheetDescription("", nil) {
					Make changes to your profile here. Click save when you're done.
				}
			}
			<div class="grid gap-4 py-4">
				<div class="grid grid-cols-4 items-center gap-4">
					@ui.Label("text-right", templ.Attributes{"for": "sheet-name"}) {
						Name
					}
					@ui.Input("name", ui.InputTypeText, "col-span-3", templ.Attributes{"id": "sheet-name", "value": "Pedro Duarte"})
				</div>
				<div class="grid grid-cols-4 items-center gap-4">
					@ui.Label("text-right", templ.Attributes{"for": "sheet-username"}) {
						Username
					}
					@ui.Input("username", ui.InputTypeText, "col-span-3", templ.Attributes{"id": "sheet-username", "value": "@peduarte"})
				</div>
			</div>
			@ui.SheetFooter("", nil) {
				@ui.Button(ui.ButtonTypeButton, ui.ButtonVariantDefault, ui.ButtonSizeDefault, "", ui.SheetCloseAttrs) {
					Save changes
				}
			}
		}
	}
}