{$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('AUTOMATIC1111 Base URL')}

{$i18n.t('Include `--api` flag when running stable-diffusion-webui')} {$i18n.t('(e.g. `sh webui.sh --api`)')}

{$i18n.t('AUTOMATIC1111 Api Auth String')}

{$i18n.t('Include `--api-auth` flag when running stable-diffusion-webui')} {$i18n .t('(e.g. `sh webui.sh --api --api-auth username_password`)') .replace('_', ':')}

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

</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=" dark:bg-gray-900 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 Engine')}
								</div>
							</div>

<select
								class=" dark:bg-gray-900 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="gemini">{$i18n.t('Gemini')}</option>
							</select>
						</div>
					</div>

{#if config.ENABLE_IMAGE_GENERATION}
						<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}

{#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
													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-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={showComfyUIWorkflowEditor}
									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}{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="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 flex-row space-x-1 items-center {loading
				? ' cursor-not-allowed'
				: ''}"
			type="submit"
			disabled={loading}
		>
			{$i18n.t('Save')}

{#if loading}
				<div class="ml-2 self-center">
					<Spinner />
				</div>
			{/if}
		</button>
	</div>
</form>