package templates

import "mal/web/shared/layout"

templ Login(formError string, username string) {
	@layout.Layout("Login", false) {
		<div class="w-full max-w-xl">
			<div class="mx-auto w-full bg-(--panel) p-6">
				<h2 class="m-0 text-2xl">Sign in</h2>
				<p class="my-3 mb-5 text-sm text-(--text-muted)">Enter your credentials to continue.</p>
				<form action="/login" method="POST" class="grid gap-4">
					<div class="grid gap-1">
						<label for="username">Username / Email</label>
						<input
							class="h-10 border border-transparent bg-(--surface-search) px-3 text-(--text) transition-colors duration-120 focus:border-(--surface-search-focus-border) focus:outline-none"
							type="text"
							id="username"
							name="username"
							required
							placeholder="you@example.com"
							value={ username }
						/>
					</div>
					<div class="grid gap-1">
						<label for="password">Password</label>
						<input
							class="h-10 border border-transparent bg-(--surface-search) px-3 text-(--text) transition-colors duration-120 focus:border-(--surface-search-focus-border) focus:outline-none"
							type="password"
							id="password"
							name="password"
							required
							placeholder="Your password"
						/>
					</div>
					<button
						type="submit"
						class="h-10 cursor-pointer border-0 bg-(--accent) text-sm font-semibold text-(--text-on-accent) hover:brightness-95"
					>
						Sign in
					</button>
					if formError != "" {
						<p
							class="mt-2 text-xs text-(--danger)"
							role="alert"
							aria-live="polite"
						>
							{ formError }
						</p>
					}
				</form>
			</div>
		</div>
	}
}