package account

templ ChangePassword(err string) {
	<form
		hx-post="/change-password"
		hx-swap="outerHTML"
		class="w-[90%] mx-auto mt-5"
		x-data={ templ.JSFuncCall(
                    "passwordComponent", err,
                    ).CallInline }
	>
		<script>
            function passwordComponent(err) {
                return {
                    password: "",
                    confirmPassword: "",
                    err: err,
                    reset() {
                        this.err = "";
                        this.password = "";
                        this.confirmPassword = "";
                    },
                };
            }
        </script>
		<div
			class="flex flex-col"
		>
			<div
				class="flex flex-col sm:flex-row sm:items-center relative w-fit"
			>
				<label
					for="password"
					class="text-lg w-40"
				>New Password</label>
				<input
					type="password"
					id="password"
					name="password"
					class="py-1 px-4 rounded-lg text-md
                    bg-surface0 border border-surface2 w-50 sm:ml-5
                    disabled:opacity-50 ml-0 disabled:pointer-events-none"
					required
					aria-describedby="password-error"
					x-model="password"
				/>
				<div
					class="absolute inset-y-0 end-0 pt-9
                        pointer-events-none sm:pt-2 pe-2"
					x-show="err"
					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
				class="flex flex-col sm:flex-row sm:items-center relative mt-2 w-fit"
			>
				<label
					for="confirm-password"
					class="text-lg w-40"
				>Confirm Password</label>
				<input
					type="password"
					id="confirm-password"
					name="confirm-password"
					class="py-1 px-4 rounded-lg text-md
                    bg-surface0 border border-surface2 w-50 sm:ml-5
                    disabled:opacity-50 ml-0 disabled:pointer-events-none"
					required
					aria-describedby="password-error"
					x-model="confirmPassword"
				/>
				<div
					class="absolute inset-y-0 pe-2 end-0 pt-9
                        pointer-events-none sm:pt-2"
					x-show="err"
					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 class="mt-2 sm:ml-43">
				<button
					class="rounded-lg bg-blue py-1 px-2 text-mantle sm:ml-2
                    hover:cursor-pointer hover:bg-blue/75 transition"
					x-cloak
					x-show="password !== '' || confirmPassword !== ''"
					x-transition.opacity.duration.500ms
				>
					Update
				</button>
				<button
					class="rounded-lg bg-overlay0 py-1 px-2 text-mantle
                hover:cursor-pointer hover:bg-surface2 transition"
					type="button"
					x-cloak
					x-show="password !== '' || confirmPassword !== ''"
					x-transition.opacity.duration.500ms
					@click="reset()"
				>
					Cancel
				</button>
			</div>
		</div>
		<p
			class="block text-red sm:ml-45 mt-1 transition"
			x-cloak
			x-show="err"
			x-text="err"
		></p>
	</form>
}