package login

import "shlf.space/internal/layouts/base"

templ LoginPage(params LoginPageParams) {
	@layouts.Base(layouts.BaseParams{Title: "login"}) {
		<div class="container">
			<form class="group flex flex-col gap-2" hx-post="/login" hx-swap="none" hx-disabled-elt="#login-button">
				<label>
					<span>Handle</span>
					<input
						class="input"
						id="handle"
						name="handle"
						type="text"
						placeholder="username.bsky.social"
						autocapitalize="none"
						autocorrect="off"
						autocomplete="username"
						required
						tabindex="1"
					/>
				</label>
				<input type="hidden" name="return_url" value={ params.ReturnUrl }/>
				<button type="submit" id="login-button" tabindex="2" class="button self-end">
					<i class="w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" data-lucide="loader-circle"></i>
					<span>Login</span>
				</button>
			</form>
			<div data-field="error" class="text-red-500">
				if params.ErrorCode != "" {
					<p class="error">
						switch (params.ErrorCode) {
							case "access_denied":
								You have not authorized the app.
							case "session":
								Server failed to create user session.
							case "handle":
								Server failed to validate your handle.
							default:
								Internal Server error.
						}
						Please try again.
					</p>
				}
				<p id="login-msg"></p>
			</div>
		</div>
	}
}