package form

// Login Form. If loginError is not an empty string, it will display the
// contents of loginError to the user.
templ RegisterForm(registerError string) {
	{{
	usernameErr := "Username is taken"
	passErrs := []string{
		"Password exceeds maximum length of 72 bytes",
		"Passwords do not match",
	}
	}}
	<form
		hx-post="/register"
		x-data={ templ.JSFuncCall(
                "registerFormData", registerError, usernameErr, passErrs,
                ).CallInline }
		x-on:htmx:xhr:loadstart="submitted=true;buttontext='Loading...'"
	>
		<script>
            function registerFormData(err, usernameErr, passErrs) {
                return {
                    submitted: false,
                    buttontext: 'Register',
                    errorMessage: err, 
                    errUsername: err === usernameErr ? true : false, 
                    errPasswords: passErrs.includes(err) ? true : false,
                    resetErr() {
                        this.errorMessage = "";
                        this.errUsername = false;
                        this.errPasswords = false;
                    },
                };
            }
        </script>
		<div
			class="grid gap-y-4"
		>
			<div>
				<label
					for="username"
					class="block text-sm mb-2"
				>Username</label>
				<div class="relative">
					<input
						type="text"
						idnutanix="username"
						name="username"
						class="py-3 px-4 block w-full rounded-lg text-sm
                        focus:border-blue focus:ring-blue bg-base
                        disabled:opacity-50 
                        disabled:pointer-events-none"
						required
						aria-describedby="username-error"
						@input="resetErr()"
					/>
					<div
						class="absolute inset-y-0 end-0 
                        pointer-events-none pe-3 pt-3"
						x-show="errUsername"
						x-cloak
					>
						<svg
							class="size-5 text-red"
							width="16"
							height="16"
							fill="currentColor"
							viewBox="0 0 16 16"
							aria-hidden="true"
						>
							<path
								d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 
                                4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 
                                0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 
                                1 0 1 0 0 2 1 1 0 0 0 0-2z"
							></path>
						</svg>
					</div>
					<p
						class="text-center text-xs text-red mt-2"
						id="username-error"
						x-show="errUsername"
						x-cloak
						x-text="if (errUsername) return errorMessage;"
					></p>
				</div>
			</div>
			<div>
				<div class="flex justify-between items-center">
					<label
						for="password"
						class="block text-sm mb-2"
					>Password</label>
				</div>
				<div class="relative">
					<input
						type="password"
						id="password"
						name="password"
						class="py-3 px-4 block w-full rounded-lg text-sm
                        focus:border-blue focus:ring-blue bg-base
                        disabled:opacity-50 disabled:pointer-events-none"
						required
						aria-describedby="password-error"
						@input="resetErr()"
					/>
					<div
						class="absolute inset-y-0 end-0 
                        pointer-events-none pe-3 pt-3"
						x-show="errPasswords"
						x-cloak
					>
						<svg
							class="size-5 text-red"
							width="16"
							height="16"
							fill="currentColor"
							viewBox="0 0 16 16"
							aria-hidden="true"
						>
							<path
								d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 
                                4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0
                                0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1
                                1 0 1 0 0 2 1 1 0 0 0 0-2z"
							></path>
						</svg>
					</div>
				</div>
			</div>
			<div>
				<div class="flex justify-between items-center">
					<label
						for="confirm-password"
						class="block text-sm mb-2"
					>Confirm Password</label>
				</div>
				<div class="relative">
					<input
						type="password"
						id="confirm-password"
						name="confirm-password"
						class="py-3 px-4 block w-full rounded-lg text-sm
                            focus:border-blue focus:ring-blue bg-base
                            disabled:opacity-50 disabled:pointer-events-none"
						required
						aria-describedby="confirm-password-error"
						@input="resetErr()"
					/>
					<div
						class="absolute inset-y-0 end-0 
                            pointer-events-none pe-3 pt-3"
						x-show="errPasswords"
						x-cloak
					>
						<svg
							class="size-5 text-red"
							width="16"
							height="16"
							fill="currentColor"
							viewBox="0 0 16 16"
							aria-hidden="true"
						>
							<path
								d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 
                                4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0
                                0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1
                                1 0 1 0 0 2 1 1 0 0 0 0-2z"
							></path>
						</svg>
					</div>
				</div>
				<p
					class="text-center text-xs text-red mt-2"
					id="password-error"
					x-show="errPasswords"
					x-cloak
					x-text="if (errPasswords) return errorMessage;"
				></p>
			</div>
			<div class="flex items-center">
				<div class="flex">
					<input
						id="remember-me"
						name="remember-me"
						type="checkbox"
						class="shrink-0 mt-0.5 border-gray-200 rounded
                            text-blue focus:ring-blue-500"
					/>
				</div>
				<div class="ms-3">
					<label
						for="remember-me"
						class="text-sm"
					>Remember me</label>
				</div>
			</div>
			<button
				x-bind:disabled="submitted"
				x-text="buttontext"
				type="submit"
				class="w-full py-3 px-4 inline-flex justify-center items-center 
                    gap-x-2 rounded-lg border border-transparent transition
                    bg-green hover:bg-green/75 text-mantle hover:cursor-pointer
                    disabled:bg-green/60 disabled:cursor-default"
			></button>
		</div>
	</form>
}