package view

import "github.com/rjNemo/rentease/internal/i18n"

func isFormError(data map[string]string, key string) bool {
	_, ok := data[key]
	return ok
}

templ LoginForm(lfvm LoginFormViewModel) {
	<div class="flex min-h-full w-full items-center justify-center py-12 px-4" id="login-form">
		<div class="card w-full max-w-sm bg-base-100 shadow-xl mx-auto">
			<div class="card-body">
				<h2 class="card-title justify-center mb-4">{ i18n.Localize(ctx, "login.title") }</h2>
				<form hx-post="/" hx-target="#login-form" hx-swap="outerHTML" x-data="{passwordTooShort:false}" class="space-y-4">
					<div class="form-control w-full">
						<input
							type="email"
							name="email"
							value={ lfvm.Email }
							placeholder="john@email.com"
							aria-label="email"
							class="input input-bordered w-full"
							if isFormError(lfvm.Errors, "credentials") {
								class="input input-bordered input-error w-full"
							}
							autocomplete="email"
							autofocus
							required
						/>
						if msg, ok := lfvm.Errors["credentials"]; ok {
							<small class="text-error mt-1">{ i18n.Localize(ctx, "login.auth_error") }: { msg }</small>
						}
					</div>
					<div class="form-control w-full">
						<input
							type="password"
							name="password"
							value={ lfvm.Password }
							placeholder="p4Ssw0rD"
							aria-label="password"
							class="input input-bordered w-full"
							if isFormError(lfvm.Errors, "credentials") {
								class="input input-bordered input-error w-full"
							}
							autocomplete="password"
							required
							@input.debounce="passwordTooShort = $event.target.value.length < 4"
							:class="{'input-error': passwordTooShort}"
						/>
						<small x-show="passwordTooShort" class="text-error mt-1">{ i18n.Localize(ctx, "login.password_short") }</small>
					</div>
					<button type="submit" class="btn btn-primary w-full">{ i18n.Localize(ctx, "login.submit") }</button>
					<div class="text-center">
						<small class="text-base-content/70">{ i18n.Localize(ctx, "login.registration_disabled") }</small>
					</div>
				</form>
			</div>
		</div>
	</div>
}