{#if config}

{#if config.ENABLE_IMAGE_GENERATION}

{#each models ?? [] as model} {/each} {#if ['comfyui', 'automatic1111', ''].includes(config?.IMAGE_GENERATION_ENGINE)} {/if}

{/if} {#if config?.IMAGE_GENERATION_ENGINE === 'openai'}

</AdminSettingField>
					{:else if (config?.IMAGE_GENERATION_ENGINE ?? 'automatic1111') === 'automatic1111'}
						<AdminSettingField
							label={$i18n.t('Base URL')}
							description={$i18n.t(
								'Connect to a stable-diffusion-webui server running with the `--api` flag.'
							)}
						>
							<div class="flex w-full gap-2">
								<input
									class={inputClass}
									placeholder={$i18n.t('Enter URL (e.g. http://127.0.0.1:7860/)')}
									bind:value={config.AUTOMATIC1111_BASE_URL}
								/>
								<button
									class="shrink-0 text-gray-400 transition-colors hover:text-gray-900 dark:text-gray-600 dark:hover:text-white"
									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>
						</AdminSettingField>

<AdminSettingField
							label={$i18n.t('Additional Parameters')}
							description={$i18n.t('Send extra JSON parameters with each AUTOMATIC1111 request.')}
						>
							<Textarea
								className={textareaClass}
								bind:value={config.AUTOMATIC1111_PARAMS}
								placeholder={$i18n.t('Enter additional parameters in JSON format')}
								minSize={100}
							/>
						</AdminSettingField>
					{:else if config?.IMAGE_GENERATION_ENGINE === 'comfyui'}
						<AdminSettingField
							label={$i18n.t('Base URL')}
							description={$i18n.t('Connect to the ComfyUI server used for generation.')}
						>
							<div class="flex w-full gap-2">
								<input
									class={inputClass}
									placeholder={$i18n.t('Enter URL (e.g. http://127.0.0.1:7860/)')}
									bind:value={config.COMFYUI_BASE_URL}
								/>
								<button
									class="shrink-0 text-gray-400 transition-colors hover:text-gray-900 dark:text-gray-600 dark:hover:text-white"
									type="button"
									aria-label="verify connection"
									on:click={async () => {
										await updateConfigHandler();
										const res = await verifyConfigUrl(localStorage.token).catch((error) => {
											toast.error(`${error}`);
											return null;
										});

<div>
							<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);
								}}
							/>
							<AdminSettingRow
								label={$i18n.t('ComfyUI Workflow')}
								description={$i18n.t(
									'Upload a workflow.json file exported as API format from ComfyUI.'
								)}
							>
								<div class="flex items-center justify-end gap-2">
									{#if config.COMFYUI_WORKFLOW}
										<button
											class="text-xs text-gray-500 transition-colors hover:text-gray-900 hover:underline dark:text-gray-500 dark:hover:text-white"
											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-500 transition-colors hover:text-gray-900 hover:underline dark:text-gray-500 dark:hover:text-white"
											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>
							</AdminSettingRow>

<div>
								<CodeEditorModal
									bind:show={showComfyUIWorkflowEditor}
									value={config.COMFYUI_WORKFLOW}
									lang="json"
									onChange={(e) => {
										config.COMFYUI_WORKFLOW = e;
									}}
									onSave={() => {
										console.log('Saved');
									}}
								/>
								
							</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'}
						<AdminSettingField
							label={$i18n.t('Base URL')}
							description={$i18n.t('Override the Gemini image generation endpoint.')}
						>
							<input
								class={inputClass}
								placeholder={$i18n.t('API Base URL')}
								bind:value={config.IMAGES_GEMINI_API_BASE_URL}
							/>
						</AdminSettingField>

<AdminSettingRow
							label={$i18n.t('Gemini Endpoint Method')}
							description={$i18n.t('Select the Gemini endpoint method to call.')}
						>
							<SettingsSelect
								bind:value={config.IMAGES_GEMINI_ENDPOINT_METHOD}
								placeholder={$i18n.t('Select Method')}
							>
								<option value="predict">predict</option>
								<option value="generateContent">generateContent</option>
							</SettingsSelect>
						</AdminSettingRow>
					{/if}
				</AdminSettingSection>

<AdminSettingRow
						label={$i18n.t('Image Edit Engine')}
						description={$i18n.t('Choose the provider used for image edits.')}
					>
						<SettingsSelect
							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>
						</SettingsSelect>
					</AdminSettingRow>

{#if config?.ENABLE_IMAGE_GENERATION && config?.ENABLE_IMAGE_EDIT}
						<div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
							<AdminSettingField label={$i18n.t('Model')}>
								<input
									list="model-list"
									class={inputClass}
									bind:value={config.IMAGE_EDIT_MODEL}
									placeholder={$i18n.t('Select a model')}
								/>

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

<AdminSettingField label={$i18n.t('Image Size')}>
									<input
									class={inputClass}
									placeholder={$i18n.t('Enter Image Size (e.g. 512x512)')}
									bind:value={config.IMAGE_EDIT_SIZE}
									/>
							</AdminSettingField>
						</div>
					{/if}

{#if config?.IMAGE_EDIT_ENGINE === 'openai'}
						<div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
							<AdminSettingField label={$i18n.t('API Base URL')}>
								<input
									class={inputClass}
									placeholder={$i18n.t('API Base URL')}
									bind:value={config.IMAGES_EDIT_OPENAI_API_BASE_URL}
								/>
							</AdminSettingField>

<AdminSettingField label={$i18n.t('API Version')}>
							<input
								class={inputClass}
								placeholder={$i18n.t('API Version')}
								bind:value={config.IMAGES_EDIT_OPENAI_API_VERSION}
							/>
						</AdminSettingField>
					{:else if config?.IMAGE_EDIT_ENGINE === 'comfyui'}
						<AdminSettingField
							label={$i18n.t('Base URL')}
							description={$i18n.t('Connect to the ComfyUI server used for image edits.')}
						>
							<div class="flex w-full gap-2">
								<input
									class={inputClass}
									placeholder={$i18n.t('Enter URL (e.g. http://127.0.0.1:7860/)')}
									bind:value={config.IMAGES_EDIT_COMFYUI_BASE_URL}
								/>
									<button
									class="shrink-0 text-gray-400 transition-colors hover:text-gray-900 dark:text-gray-600 dark:hover:text-white"
										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>
						</AdminSettingField>

<div>
							<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);
							}}
						/>
							<AdminSettingRow
								label={$i18n.t('ComfyUI Workflow')}
								description={$i18n.t('Upload a workflow.json file exported as API format from ComfyUI.')}
							>
								<div class="flex items-center justify-end gap-2">
									{#if config.IMAGES_EDIT_COMFYUI_WORKFLOW}
										<button
											class="text-xs text-gray-500 transition-colors hover:text-gray-900 hover:underline dark:text-gray-500 dark:hover:text-white"
											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-500 transition-colors hover:text-gray-900 hover:underline dark:text-gray-500 dark:hover:text-white"
											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>
							</AdminSettingRow>

<CodeEditorModal
								bind:show={showComfyUIEditWorkflowEditor}
								value={config.IMAGES_EDIT_COMFYUI_WORKFLOW}
								lang="json"
								onChange={(e) => {
									config.IMAGES_EDIT_COMFYUI_WORKFLOW = e;
								}}
								onSave={() => {
									console.log('Saved');
								}}
							/>
						</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-6 text-sm font-normal">
		<button
			class="px-3.5 py-1.5 text-sm font-normal 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>

{$i18n.t('Images')}