{#if generatedImages.length > 0}

{#each generatedImages as image, index} {/each}

{:else}

{$i18n.t('Generated images will appear here')}

{/if}

{#if sourceImages.length > 0}

{#each sourceImages as image, index}

{/each}

{/if}

0
								? $i18n.t('Describe the edit...')
								: $i18n.t('Describe the image...')}
							on:input={resizePromptTextarea}
							on:focus={resizePromptTextarea}
							on:keydown={(e) => {
								if (e.key === 'Enter' && (e.metaKey || e.ctrlKey) && !loading) {
									e.preventDefault();
									submitHandler();
								}
							}}
							rows="2"
						/>
					</div>

<div class="flex justify-between items-center gap-2 mt-2">
						<div class="shrink-0">
							<input
								type="file"
								accept="image/*"
								multiple
								class="hidden"
								bind:this={fileInputElement}
								on:change={handleFileUpload}
							/>
							<button
								type="button"
								class="px-3.5 py-1.5 text-sm font-medium bg-gray-50 hover:bg-gray-100 text-gray-900 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-200 transition rounded-lg"
								on:click={() => fileInputElement?.click()}
								on:dragover|preventDefault
								on:drop={handleDrop}
							>
								{$i18n.t('Add Image')}
							</button>
						</div>

<div class="flex gap-2 shrink-0">
							{#if !loading}
								<button
									disabled={prompt.trim() === ''}
									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-lg disabled:opacity-50 disabled:cursor-not-allowed"
									on:click={submitHandler}
								>
									{$i18n.t('Run')}
								</button>
							{:else}
								<button
									class="px-3.5 py-1.5 text-sm font-medium bg-gray-300 text-black transition rounded-lg flex items-center gap-2"
									disabled
								>
									<Spinner className="size-4" />
									{$i18n.t('Running...')}
								</button>
							{/if}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>