Dialog

templ DialogDemo() {
	@ui.Dialog("", nil) {
		@ui.Button(ui.ButtonTypeButton, ui.ButtonVariantOutline, ui.ButtonSizeDefault, "", ui.DialogTriggerAttrs) {
			Edit Profile
		}
		@ui.DialogContent("sm:max-w-[425px]", nil) {
			@ui.DialogHeader("", nil) {
				@ui.DialogTitle("", nil) {
					Edit profile
				}
				@ui.DialogDescription("", 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": "dlg-name"}) {
						Name
					}
					@ui.Input("name", ui.InputTypeText, "col-span-3", templ.Attributes{"id": "dlg-name", "value": "Pedro Duarte"})
				</div>
				<div class="grid grid-cols-4 items-center gap-4">
					@ui.Label("text-right", templ.Attributes{"for": "dlg-username"}) {
						Username
					}
					@ui.Input("username", ui.InputTypeText, "col-span-3", templ.Attributes{"id": "dlg-username", "value": "@peduarte"})
				</div>
			</div>
			@ui.DialogFooter("", nil) {
				@ui.Button(ui.ButtonTypeSubmit, ui.ButtonVariantDefault, ui.ButtonSizeDefault, "", ui.DialogCloseAttrs) {
					Save changes
				}
			}
		}
	}
}