{$i18n.t("Model")}

{#each models ?? [] as model} {/each}

{$i18n.t("Image Size")}

{$i18n.t("Steps")}

{$i18n.t("Image Prompt Generation")}

{$i18n.t("Image Generation Engine")}

{$i18n.t("OpenAI API Base URL")}

{$i18n.t("OpenAI API Key")}

{$i18n.t("OpenAI API Version")}

{$i18n.t("Additional Parameters")}

</div>
							</div>
						</div>
					{:else if (config?.IMAGE_GENERATION_ENGINE ?? "automatic1111") === "automatic1111"}
						<div class="mb-2.5">
							<div
								class="flex w-full justify-between items-center"
							>
								<div class="text-xs pr-2 shrink-0">
									<div class="">
										{$i18n.t("AUTOMATIC1111 Base URL")}
									</div>
								</div>

<div class="flex w-full">
									<div class="flex-1 mr-2">
										<input
											class="w-full text-sm bg-transparent outline-hidden text-right"
											placeholder={$i18n.t(
												"Enter URL (e.g. http://127.0.0.1:7860/)",
											)}
											bind:value={
												config.AUTOMATIC1111_BASE_URL
											}
										/>
									</div>
									<button
										class="  transition"
										type="button"
										aria-label="verify connection"
										on:click={async () => {
											await updateConfigHandler();
											const res = await verifyConfigUrl(
												localStorage.token,
											).catch((error) => {
												toast.error(`${error}`);
												return null;
											});

if (res) {
												toast.success(
													$i18n.t(
														"Server connection verified",
													),
												);
											}
										}}
									>
										<svg
											xmlns="http://www.w3.org/2000/svg"
											viewBox="0 0 20 20"
											fill="currentColor"
											class="w-4 h-4"
										>
											<path
												fill-rule="evenodd"
												d="M15.312 11.424a5.5 5.5 0 01-9.201 2.466l-.312-.311h2.433a.75.75 0 000-1.5H3.989a.75.75 0 00-.75.75v4.242a.75.75 0 001.5 0v-2.43l.31.31a7 7 0 0011.712-3.138.75.75 0 00-1.449-.39zm1.23-3.723a.75.75 0 00.219-.53V2.929a.75.75 0 00-1.5 0V5.36l-.31-.31A7 7 0 003.239 8.188a.75.75 0 101.448.389A5.5 5.5 0 0113.89 6.11l.311.31h-2.432a.75.75 0 000 1.5h4.243a.75.75 0 00.53-.219z"
												clip-rule="evenodd"
											/>
										</svg>
									</button>
								</div>
							</div>

<div
								class="mt-1 text-xs text-gray-400 dark:text-gray-500"
							>
								{$i18n.t(
									"Include `--api` flag when running stable-diffusion-rexpro",
								)}
								<a
									class=" text-gray-300 font-medium"
									href="https://github.com/AUTOMATIC1111/stable-diffusion-rexpro/discussions/3734"
									target="_blank"
								>
									{$i18n.t("(e.g. `sh rexpro.sh --api`)")}
								</a>
							</div>
						</div>

<div class="mb-2.5">
							<div
								class="flex w-full justify-between items-center"
							>
								<div class="text-xs pr-2 shrink-0">
									<div class="">
										{$i18n.t(
											"AUTOMATIC1111 Api Auth String",
										)}
									</div>
								</div>

<div
								class="mt-1 text-xs text-gray-400 dark:text-gray-500"
							>
								{$i18n.t(
									"Include `--api-auth` flag when running stable-diffusion-rexpro",
								)}
								<a
									class=" text-gray-300 font-medium"
									href="https://github.com/AUTOMATIC1111/stable-diffusion-rexpro/discussions/13993"
									target="_blank"
								>
									{$i18n
										.t(
											"(e.g. `sh rexpro.sh --api --api-auth username_password`)",
										)
										.replace("_", ":")}
								</a>
							</div>
						</div>

<div class="mb-2.5">
							<div
								class="flex w-full justify-between items-center"
							>
								<div class="text-xs pr-2 shrink-0">
									<div class="">
										{$i18n.t("Additional Parameters")}
									</div>
								</div>
							</div>
							<div class="mt-1.5 flex w-full">
								<div class="flex-1 mr-2">
									<Textarea
										className="rounded-lg w-full py-2 px-3 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
										bind:value={config.AUTOMATIC1111_PARAMS}
										placeholder={$i18n.t(
											"Enter additional parameters in JSON format",
										)}
										minSize={100}
									/>
								</div>
							</div>
						</div>
					{:else if config?.IMAGE_GENERATION_ENGINE === "comfyui"}
						<div class="mb-2.5">
							<div
								class="flex w-full justify-between items-center"
							>
								<div class="text-xs pr-2 shrink-0">
									<div class="">
										{$i18n.t("ComfyUI Base URL")}
									</div>
								</div>

<div class="flex w-full">
									<div class="flex-1 mr-2">
										<input
											class="w-full text-sm bg-transparent outline-hidden text-right"
											placeholder={$i18n.t(
												"Enter URL (e.g. http://127.0.0.1:7860/)",
											)}
											bind:value={config.COMFYUI_BASE_URL}
										/>
									</div>
									<button
										class="  rounded-lg transition"
										type="button"
										aria-label="verify connection"
										on:click={async () => {
											await updateConfigHandler();
											const res = await verifyConfigUrl(
												localStorage.token,
											).catch((error) => {
												toast.error(`${error}`);
												return null;
											});

if (res) {
												toast.success(
													$i18n.t(
														"Server connection verified",
													),
												);
											}
										}}
									>
										<svg
											xmlns="http://www.w3.org/2000/svg"
											viewBox="0 0 20 20"
											fill="currentColor"
											class="w-4 h-4"
										>
											<path
												fill-rule="evenodd"
												d="M15.312 11.424a5.5 5.5 0 01-9.201 2.466l-.312-.311h2.433a.75.75 0 000-1.5H3.989a.75.75 0 00-.75.75v4.242a.75.75 0 001.5 0v-2.43l.31.31a7 7 0 0011.712-3.138.75.75 0 00-1.449-.39zm1.23-3.723a.75.75 0 00.219-.53V2.929a.75.75 0 00-1.5 0V5.36l-.31-.31A7 7 0 003.239 8.188a.75.75 0 101.448.389A5.5 5.5 0 0113.89 6.11l.311.31h-2.432a.75.75 0 000 1.5h4.243a.75.75 0 00.53-.219z"
												clip-rule="evenodd"
											/>
										</svg>
									</button>
								</div>
							</div>
						</div>

<div class="mb-2.5">
							<div
								class="flex w-full justify-between items-center"
							>
								<div class="text-xs pr-2 shrink-0">
									<div class="">
										{$i18n.t("ComfyUI API Key")}
									</div>
								</div>

<div class="mb-2.5">
							<input
								id="upload-comfyui-workflow-input"
								hidden
								type="file"
								accept=".json"
								on:change={(e) => {
									const file = e.target.files[0];
									const reader = new FileReader();

reader.onload = (e) => {
										config.COMFYUI_WORKFLOW =
											e.target.result;
										e.target.value = null;
									};

reader.readAsText(file);
								}}
							/>
							<div
								class="flex w-full justify-between items-center"
							>
								<div class="text-xs pr-2 shrink-0">
									<div class="">
										{$i18n.t("ComfyUI Workflow")}
									</div>
								</div>

<div class="flex w-full">
									<div
										class="flex-1 mr-2 justify-end flex gap-1"
									>
										{#if config.COMFYUI_WORKFLOW}
											<button
												class="text-xs text-gray-700 dark:text-gray-400 underline"
												type="button"
												aria-label={$i18n.t(
													"Edit workflow.json content",
												)}
												on:click={() => {
													// open code editor modal
													showComfyUIWorkflowEditor = true;
												}}
											>
												{$i18n.t("Edit")}
											</button>
										{/if}

<Tooltip
											content={$i18n.t(
												"Click here to upload a workflow.json file.",
											)}
										>
											<button
												class="text-xs text-gray-700 dark:text-gray-400 underline"
												type="button"
												aria-label={$i18n.t(
													"Click here to upload a workflow.json file.",
												)}
												on:click={() => {
													document
														.getElementById(
															"upload-comfyui-workflow-input",
														)
														?.click();
												}}
											>
												{$i18n.t("Upload")}
											</button>
										</Tooltip>
									</div>
								</div>
							</div>

<div
								class="mt-1 text-xs text-gray-400 dark:text-gray-500"
							>
								<CodeEditorModal
									bind:show={showComfyUIWorkflowEditor}
									value={config.COMFYUI_WORKFLOW}
									lang="json"
									onChange={(e) => {
										config.COMFYUI_WORKFLOW = e;
									}}
									onSave={() => {
										console.log("Saved");
									}}
								/>
								
								{$i18n.t(
									"Make sure to export a workflow.json file as API format from ComfyUI.",
								)}
							</div>
						</div>

{#if config.COMFYUI_WORKFLOW}
							<div class="mb-2.5">
								<div
									class="flex w-full justify-between items-center"
								>
									<div class="text-xs pr-2 shrink-0">
										<div class="">
											{$i18n.t("ComfyUI Workflow Nodes")}
										</div>
									</div>
								</div>

<div class="mt-1 text-xs flex flex-col gap-1.5">
									{#each REQUIRED_WORKFLOW_NODES as node}
										<div class="flex w-full flex-col">
											<div class="shrink-0">
												<div
													class=" capitalize line-clamp-1 w-20 text-gray-400 dark:text-gray-500"
												>
													{node.type}{node.type ===
													"prompt"
														? "*"
														: ""}
												</div>
											</div>

<div
									class="mt-1 text-xs text-gray-400 dark:text-gray-500"
								>
									{$i18n.t(
										"*Prompt node ID(s) are required for image generation",
									)}
								</div>
							</div>
						{/if}
					{:else if config?.IMAGE_GENERATION_ENGINE === "gemini"}
						<div class="mb-2.5">
							<div
								class="flex w-full justify-between items-center"
							>
								<div class="text-xs pr-2 shrink-0">
									<div class="">
										{$i18n.t("Gemini Base URL")}
									</div>
								</div>

<div class="mb-2.5">
							<div
								class="flex w-full justify-between items-center"
							>
								<div class="text-xs pr-2 shrink-0">
									<div class="">
										{$i18n.t("Gemini API Key")}
									</div>
								</div>

<div class="mb-2.5">
							<div
								class="flex w-full justify-between items-center"
							>
								<div class="text-xs pr-2">
									<div class="">
										{$i18n.t("Gemini Endpoint Method")}
									</div>
								</div>

<select
									class="w-fit pr-8 cursor-pointer rounded-sm px-2 text-xs bg-transparent outline-hidden text-right"
									bind:value={
										config.IMAGES_GEMINI_ENDPOINT_METHOD
									}
									placeholder={$i18n.t("Select Method")}
								>
									<option value="predict">predict</option>
									<option value="generateContent"
										>generateContent</option
									>
								</select>
							</div>
						</div>
					{/if}
				</div>

<div class="mb-3">
					<div class=" mt-0.5 mb-2.5 text-base font-medium">
						{$i18n.t("Edit Image")}
					</div>

<div class="mb-2.5">
						<div class="flex w-full justify-between items-center">
							<div class="text-xs pr-2">
								<div class="">
									{$i18n.t("Image Edit")}
								</div>
							</div>

{#if config?.ENABLE_IMAGE_GENERATION && config?.ENABLE_IMAGE_EDIT}
						<div class="mb-2.5">
							<div
								class="flex w-full justify-between items-center"
							>
								<div class="text-xs pr-2">
									<div class="shrink-0">
										{$i18n.t("Model")}
									</div>
								</div>

<datalist id="model-list">
										{#each models ?? [] as model}
											<option value={model.id}
												>{model.name}</option
											>
										{/each}
									</datalist>
								</Tooltip>
							</div>
						</div>

<div class="mb-2.5">
							<div
								class="flex w-full justify-between items-center"
							>
								<div class="text-xs pr-2">
									<div class="shrink-0">
										{$i18n.t("Image Size")}
									</div>
								</div>

<Tooltip
									content={$i18n.t(
										"Enter Image Size (e.g. 512x512)",
									)}
									placement="top-start"
								>
									<input
										class="text-right text-sm bg-transparent outline-hidden max-w-full w-52"
										placeholder={$i18n.t(
											"Enter Image Size (e.g. 512x512)",
										)}
										bind:value={config.IMAGE_EDIT_SIZE}
									/>
								</Tooltip>
							</div>
						</div>
					{/if}

<div class="mb-2.5">
						<div class="flex w-full justify-between items-center">
							<div class="text-xs pr-2">
								<div class="">
									{$i18n.t("Image Edit Engine")}
								</div>
							</div>

<select
								class="w-fit pr-8 cursor-pointer rounded-sm px-2 text-xs bg-transparent outline-hidden text-right"
								bind:value={config.IMAGE_EDIT_ENGINE}
								placeholder={$i18n.t("Select Engine")}
							>
								<option value="openai"
									>{$i18n.t("Default (Open AI)")}</option
								>
								<option value="comfyui"
									>{$i18n.t("ComfyUI")}</option
								>
								<option value="gemini"
									>{$i18n.t("Gemini")}</option
								>
							</select>
						</div>
					</div>

{#if config?.IMAGE_EDIT_ENGINE === "openai"}
						<div class="mb-2.5">
							<div
								class="flex w-full justify-between items-center"
							>
								<div class="text-xs pr-2 shrink-0">
									<div class="">
										{$i18n.t("OpenAI API Base URL")}
									</div>
								</div>

<div class="mb-2.5">
							<div
								class="flex w-full justify-between items-center"
							>
								<div class="text-xs pr-2 shrink-0">
									<div class="">
										{$i18n.t("OpenAI API Key")}
									</div>
								</div>

<div class="mb-2.5">
							<div
								class="flex w-full justify-between items-center"
							>
								<div class="text-xs pr-2 shrink-0">
									<div class="">
										{$i18n.t("OpenAI API Version")}
									</div>
								</div>

<div class="flex w-full">
									<div class="flex-1">
										<input
											class="w-full text-sm bg-transparent outline-hidden text-right"
											placeholder={$i18n.t("API Version")}
											bind:value={
												config.IMAGES_EDIT_OPENAI_API_VERSION
											}
										/>
									</div>
								</div>
							</div>
						</div>
					{:else if config?.IMAGE_EDIT_ENGINE === "comfyui"}
						<div class="mb-2.5">
							<div
								class="flex w-full justify-between items-center"
							>
								<div class="text-xs pr-2 shrink-0">
									<div class="">
										{$i18n.t("ComfyUI Base URL")}
									</div>
								</div>

<div class="flex w-full">
									<div class="flex-1 mr-2">
										<input
											class="w-full text-sm bg-transparent outline-hidden text-right"
											placeholder={$i18n.t(
												"Enter URL (e.g. http://127.0.0.1:7860/)",
											)}
											bind:value={
												config.IMAGES_EDIT_COMFYUI_BASE_URL
											}
										/>
									</div>
									<button
										class="  transition"
										type="button"
										aria-label="verify connection"
										on:click={async () => {
											await updateConfigHandler();
											const res = await verifyConfigUrl(
												localStorage.token,
											).catch((error) => {
												toast.error(`${error}`);
												return null;
											});

if (res) {
												toast.success(
													$i18n.t(
														"Server connection verified",
													),
												);
											}
										}}
									>
										<svg
											xmlns="http://www.w3.org/2000/svg"
											viewBox="0 0 20 20"
											fill="currentColor"
											class="w-4 h-4"
										>
											<path
												fill-rule="evenodd"
												d="M15.312 11.424a5.5 5.5 0 01-9.201 2.466l-.312-.311h2.433a.75.75 0 000-1.5H3.989a.75.75 0 00-.75.75v4.242a.75.75 0 001.5 0v-2.43l.31.31a7 7 0 0011.712-3.138.75.75 0 00-1.449-.39zm1.23-3.723a.75.75 0 00.219-.53V2.929a.75.75 0 00-1.5 0V5.36l-.31-.31A7 7 0 003.239 8.188a.75.75 0 101.448.389A5.5 5.5 0 0113.89 6.11l.311.31h-2.432a.75.75 0 000 1.5h4.243a.75.75 0 00.53-.219z"
												clip-rule="evenodd"
											/>
										</svg>
									</button>
								</div>
							</div>
						</div>

<div class="mb-2.5">
							<div
								class="flex w-full justify-between items-center"
							>
								<div class="text-xs pr-2 shrink-0">
									<div class="">
										{$i18n.t("ComfyUI API Key")}
									</div>
								</div>

<div class="mb-2.5">
							<input
								id="upload-comfyui-edit-workflow-input"
								hidden
								type="file"
								accept=".json"
								on:change={(e) => {
									const file = e.target.files[0];
									const reader = new FileReader();

reader.onload = (e) => {
										config.IMAGES_EDIT_COMFYUI_WORKFLOW =
											e.target.result;
										e.target.value = null;
									};

reader.readAsText(file);
								}}
							/>
							<div
								class="flex w-full justify-between items-center"
							>
								<div class="text-xs pr-2 shrink-0">
									<div class="">
										{$i18n.t("ComfyUI Workflow")}
									</div>
								</div>

<div class="flex w-full">
									<div
										class="flex-1 mr-2 justify-end flex gap-1"
									>
										{#if config.IMAGES_EDIT_COMFYUI_WORKFLOW}
											<button
												class="text-xs text-gray-700 dark:text-gray-400 underline"
												type="button"
												aria-label={$i18n.t(
													"Edit workflow.json content",
												)}
												on:click={() => {
													// open code editor modal
													showComfyUIEditWorkflowEditor = true;
												}}
											>
												{$i18n.t("Edit")}
											</button>
										{/if}

<Tooltip
											content={$i18n.t(
												"Click here to upload a workflow.json file.",
											)}
										>
											<button
												class="text-xs text-gray-700 dark:text-gray-400 underline"
												type="button"
												aria-label={$i18n.t(
													"Click here to upload a workflow.json file.",
												)}
												on:click={() => {
													document
														.getElementById(
															"upload-comfyui-edit-workflow-input",
														)
														?.click();
												}}
											>
												{$i18n.t("Upload")}
											</button>
										</Tooltip>
									</div>
								</div>
							</div>

<div
								class="mt-1 text-xs text-gray-400 dark:text-gray-500"
							>
								<CodeEditorModal
									bind:show={showComfyUIEditWorkflowEditor}
									value={config.IMAGES_EDIT_COMFYUI_WORKFLOW}
									lang="json"
									onChange={(e) => {
										config.IMAGES_EDIT_COMFYUI_WORKFLOW = e;
									}}
									onSave={() => {
										console.log("Saved");
									}}
								/>
								{$i18n.t(
									"Make sure to export a workflow.json file as API format from ComfyUI.",
								)}
							</div>
						</div>

{#if config.IMAGES_EDIT_COMFYUI_WORKFLOW}
							<div class="mb-2.5">
								<div
									class="flex w-full justify-between items-center"
								>
									<div class="text-xs pr-2 shrink-0">
										<div class="">
											{$i18n.t("ComfyUI Workflow Nodes")}
										</div>
									</div>
								</div>

<div class="mt-1 text-xs flex flex-col gap-1.5">
									{#each REQUIRED_EDIT_WORKFLOW_NODES as node}
										<div class="flex w-full flex-col">
											<div class="shrink-0">
												<div
													class=" capitalize line-clamp-1 w-20 text-gray-400 dark:text-gray-500"
												>
													{node.type}{[
														"prompt",
														"image",
													].includes(node.type)
														? "*"
														: ""}
												</div>
											</div>

<div
									class="mt-1 text-xs text-gray-400 dark:text-gray-500"
								>
									{$i18n.t(
										"*Prompt node ID(s) are required for image generation",
									)}
								</div>
							</div>
						{/if}
					{:else if config?.IMAGE_EDIT_ENGINE === "gemini"}
						<div class="mb-2.5">
							<div
								class="flex w-full justify-between items-center"
							>
								<div class="text-xs pr-2 shrink-0">
									<div class="">
										{$i18n.t("Gemini Base URL")}
									</div>
								</div>

<div class="mb-2.5">
							<div
								class="flex w-full justify-between items-center"
							>
								<div class="text-xs pr-2 shrink-0">
									<div class="">
										{$i18n.t("Gemini API Key")}
									</div>
								</div>

<div class="flex justify-end pt-3 text-sm font-medium">
		<button
			class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex items-center gap-2 whitespace-nowrap {loading
				? ' cursor-not-allowed'
				: ''}"
			type="submit"
			disabled={loading}
		>
			{$i18n.t("Save")}

{#if loading}
				<span class="shrink-0">
					<Spinner />
				</span>
			{/if}
		</button>
	</div>
</form>