A simple login form

templ Login01Preview() {
	@PreviewLayout("Login 01 Preview") {
		<div class="flex min-h-svh items-center justify-center bg-background p-4">
			<div class="w-full max-w-sm">
				@ui.Card(ui.DOMProps{}) {
					@ui.CardHeader(ui.DOMProps{Class: "space-y-1 text-center"}) {
						@ui.CardTitle(ui.DOMProps{}) { <span>Sign in</span> }
						@ui.CardDescription(ui.DOMProps{}) { <span>Enter your credentials to access your account</span> }
					}
					@ui.CardContent(ui.DOMProps{Class: "space-y-4"}) {
						<div class="space-y-2">
							@ui.Label(ui.LabelProps{For: "email-01"}) { <span>Email</span> }
							@ui.Input(ui.InputProps{
								DOMProps: ui.DOMProps{ID: "email-01"},
								Type: "email",
								Placeholder: "name@example.com",
							})
						</div>
						<div class="space-y-2">
							@ui.Label(ui.LabelProps{For: "password-01"}) { <span>Password</span> }
							@ui.Input(ui.InputProps{
								DOMProps: ui.DOMProps{ID: "password-01"},
								Type: "password",
								Placeholder: "••••••••",
							})
						</div>
							@ui.Button(ui.ButtonProps{
								Label:   "Sign in",
								Variant: ui.ButtonVariantDefault,
								Size:    ui.ButtonSizeDefault,
								DOMProps: ui.DOMProps{
									Class: "w-full",
									Attrs: t.Attributes{"type": "button"},
								},
							})
						<p class="text-center text-sm text-muted-foreground">
							Don't have an account? <a href="#" class="underline underline-offset-4 hover:text-primary">Sign up</a>
						</p>
					}
				}
			</div>
		</div>
	}
}