{name || $i18n.t('Automation')} • {$WEBUI

{#if isDirty} {/if}

{$i18n.t('Instructions')}

</div>
				</div>
			</div>

<div class="hidden md:flex w-full md:w-80 shrink-0 overflow-y-auto px-1 flex-col gap-5">
				<div>
					<div class="text-gray-500 text-xs mb-3">{$i18n.t('Configuration')}</div>
					<div class="space-y-2">
						
						<div class="flex items-center justify-between text-xs">
							<span class="text-gray-600 dark:text-gray-400">{$i18n.t('Repeats')}</span>
							<Dropdown bind:show={showScheduleDropdown} side="bottom" align="end">
								<button
									type="button"
									class="flex items-center gap-1.5 px-3 py-1.5 rounded-2xl text-xs transition text-gray-700 dark:text-gray-300 hover:bg-black/5 dark:hover:bg-white/5 bg-gray-50 dark:bg-gray-850/50 max-w-40 truncate"
								>
									<svg
										xmlns="http://www.w3.org/2000/svg"
										fill="none"
										viewBox="0 0 24 24"
										stroke-width="1.5"
										stroke="currentColor"
										class="size-3.5 text-gray-400 shrink-0"
										><path
											stroke-linecap="round"
											stroke-linejoin="round"
											d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
										/></svg
									>
									<span class="truncate">{scheduleLabel}</span>
									<svg
										xmlns="http://www.w3.org/2000/svg"
										fill="none"
										viewBox="0 0 24 24"
										stroke-width="2"
										stroke="currentColor"
										class="size-3 text-gray-400 shrink-0"
										><path
											stroke-linecap="round"
											stroke-linejoin="round"
											d="m19.5 8.25-7.5 7.5-7.5-7.5"
										/></svg
									>
								</button>
								<div
									slot="content"
									class="rounded-2xl shadow-lg border border-gray-200 dark:border-gray-800 flex flex-col bg-white dark:bg-gray-850 w-64 p-1"
								>
									<div class="px-2 text-xs text-gray-500 py-1">
										{$i18n.t('Schedule')}
									</div>
									<div class="px-1.5 mt-0.5 mb-2">
										<select
											class="w-full bg-transparent rounded-xl text-xs py-2 px-2 outline-hidden border-none"
											bind:value={frequency}
											on:click={(e) => e.stopPropagation()}
											on:change={markDirty}
										>
											{#each FREQUENCIES as f}<option value={f.key}>{f.label}</option>{/each}
										</select>
									</div>
									{#if frequency === 'CUSTOM'}
										<div class="px-2 pb-2">
											<input
												type="text"
												bind:value={customRrule}
												placeholder="RRULE:FREQ=DAILY;BYHOUR=9;BYMINUTE=0"
												class="w-full bg-transparent outline-hidden text-xs placeholder:text-gray-400 dark:placeholder:text-gray-600"
												on:click={(e) => e.stopPropagation()}
												on:input={markDirty}
											/>
										</div>
									{:else if frequency !== 'HOURLY'}
										<div class="flex gap-2 flex-wrap items-center px-3 pb-2 text-xs">
											{#if frequency === 'ONCE'}
												<input
													type="date"
													bind:value={onceDate}
													min={new Date().toISOString().split('T')[0]}
													class="bg-transparent outline-hidden text-xs dark:color-scheme-dark"
													on:click={(e) => e.stopPropagation()}
													on:input={markDirty}
												/>
												<input
													type="time"
													bind:value={onceTime}
													class="bg-transparent outline-hidden text-xs dark:color-scheme-dark"
													on:click={(e) => e.stopPropagation()}
													on:input={markDirty}
												/>
											{:else}
												<span class="text-xs text-gray-500 mr-0.5">{$i18n.t('Time')}</span>
												<input
													type="time"
													value={`${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}`}
													on:input={(e) => {
														const [h, m] = e.currentTarget.value.split(':').map(Number);
														hour = h;
														minute = m;
														markDirty();
													}}
													class="bg-transparent text-center outline-hidden text-xs dark:color-scheme-dark"
													on:click={(e) => e.stopPropagation()}
												/>
											{/if}
											{#if frequency === 'MONTHLY'}
												<span class="text-xs text-gray-500">{$i18n.t('Day')}</span>
												<input
													type="number"
													bind:value={monthDay}
													min={1}
													max={31}
													class="w-8 bg-transparent text-center outline-hidden text-xs"
													on:click={(e) => e.stopPropagation()}
													on:input={markDirty}
												/>
											{/if}
										</div>
										{#if frequency === 'WEEKLY'}
											<div class="flex gap-1 px-2 pb-2">
												{#each DAYS as d}
													<button
														type="button"
														class="flex-1 py-1 text-xs rounded-xl transition {selectedDays.includes(
															d.key
														)
															? 'bg-black dark:bg-white text-white dark:text-black'
															: 'bg-gray-50 dark:bg-gray-800 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300'}"
														on:click={() => {
															selectedDays = selectedDays.includes(d.key)
																? selectedDays.filter((x) => x !== d.key)
																: [...selectedDays, d.key];
															markDirty();
														}}
													>
														{d.label}
													</button>
												{/each}
											</div>
										{/if}
									{/if}
								</div>
							</Dropdown>
						</div>

<div class="flex items-center justify-between text-xs">
							<span class="text-gray-600 dark:text-gray-400">{$i18n.t('Model')}</span>
							<Dropdown bind:show={showModelDropdown} side="bottom" align="end">
								<button
									type="button"
									class="flex items-center gap-1.5 px-3 py-1.5 rounded-2xl text-xs transition text-gray-700 dark:text-gray-300 hover:bg-black/5 dark:hover:bg-white/5 bg-gray-50 dark:bg-gray-850/50 max-w-40 truncate"
								>
									<svg
										xmlns="http://www.w3.org/2000/svg"
										fill="none"
										viewBox="0 0 24 24"
										stroke-width="1.5"
										stroke="currentColor"
										class="size-3.5 shrink-0 text-gray-400"
										><path
											stroke-linecap="round"
											stroke-linejoin="round"
											d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.455 2.456L21.75 6l-1.036.259a3.375 3.375 0 0 0 2.455 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z"
										/></svg
									>
									<span class="truncate">{modelLabel}</span>
									<svg
										xmlns="http://www.w3.org/2000/svg"
										fill="none"
										viewBox="0 0 24 24"
										stroke-width="2"
										stroke="currentColor"
										class="size-3 shrink-0 text-gray-400"
										><path
											stroke-linecap="round"
											stroke-linejoin="round"
											d="m19.5 8.25-7.5 7.5-7.5-7.5"
										/></svg
									>
								</button>
								<div
									slot="content"
									class="rounded-2xl shadow-lg border border-gray-200 dark:border-gray-800 flex flex-col bg-white dark:bg-gray-850 w-72 p-1"
								>
									<div
										class="flex items-center gap-2 px-2.5 py-1.5 border-b border-gray-100 dark:border-gray-800/50 mb-1"
									>
										<Search className="size-3.5 text-gray-400" strokeWidth="2.5" />
										<input
											bind:value={modelSearch}
											class="w-full text-xs bg-transparent outline-hidden"
											placeholder={$i18n.t('Search a model')}
											autocomplete="off"
											on:click={(e) => e.stopPropagation()}
										/>
									</div>
									<div class="overflow-y-auto scrollbar-thin max-h-60 pt-1">
										{#each filteredModels as model (model.id)}
											<button
												class="px-2.5 py-2 rounded-xl w-full text-left text-xs {model_id ===
												model.id
													? 'bg-gray-50 dark:bg-gray-800/60'
													: 'hover:bg-gray-50 dark:hover:bg-gray-800/30'}"
												type="button"
												on:click={() => {
													model_id = model.id;
													showModelDropdown = false;
													modelSearch = '';
													markDirty();
												}}
											>
												<div class="flex items-center text-black dark:text-gray-100 line-clamp-1">
													<img
														src={`${WEBUI_API_BASE_URL}/models/model/profile/image?id=${encodeURIComponent(model.id)}`}
														alt={model?.name ?? model.id}
														class="rounded-full size-5 shrink-0 mr-2"
														loading="lazy"
														on:error={(e) => {
															e.currentTarget.src = '/favicon.png';
														}}
													/>
													<div class="truncate">{model.name}</div>
												</div>
											</button>
										{:else}
											<div class="block px-3 py-2 text-xs text-gray-500">
												{$i18n.t('No results found')}
											</div>
										{/each}
									</div>
								</div>
							</Dropdown>
						</div>

{#if terminalServers.length > 0}
							<div class="flex items-center justify-between text-xs">
								<span class="text-gray-600 dark:text-gray-400">{$i18n.t('Terminal')}</span>
								<Dropdown bind:show={showTerminalDropdown} side="bottom" align="end">
									<button
										type="button"
										class="flex items-center gap-1.5 px-3 py-1.5 rounded-2xl text-xs transition text-gray-700 dark:text-gray-300 hover:bg-black/5 dark:hover:bg-white/5 bg-gray-50 dark:bg-gray-850/50 max-w-40 truncate"
									>
										<svg
											xmlns="http://www.w3.org/2000/svg"
											fill="none"
											viewBox="0 0 24 24"
											stroke-width="1.5"
											stroke="currentColor"
											class="size-3.5 shrink-0 text-gray-400"
											><path
												stroke-linecap="round"
												stroke-linejoin="round"
												d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z"
											/></svg
										>
										<span class="truncate">{terminalLabel}</span>
										<svg
											xmlns="http://www.w3.org/2000/svg"
											fill="none"
											viewBox="0 0 24 24"
											stroke-width="2"
											stroke="currentColor"
											class="size-3 shrink-0 text-gray-400"
											><path
												stroke-linecap="round"
												stroke-linejoin="round"
												d="m19.5 8.25-7.5 7.5-7.5-7.5"
											/></svg
										>
									</button>
									<div
										slot="content"
										class="rounded-2xl shadow-lg border border-gray-200 dark:border-gray-800 flex flex-col bg-white dark:bg-gray-850 min-w-56 max-w-56 p-1"
									>
										<div class="px-2 text-xs text-gray-500 py-1">
											{$i18n.t('Terminal Setting')}
										</div>
										{#each terminalServers as server (server.id)}
											<button
												class="flex w-full justify-between gap-2 items-center px-3 py-2 text-xs cursor-pointer rounded-xl {terminalServerId ===
												server.id
													? 'bg-gray-50 dark:bg-gray-800/80 '
													: 'hover:bg-gray-50 dark:hover:bg-gray-800/50'}"
												type="button"
												on:click={() => {
													if (terminalServerId === server.id) {
														terminalServerId = '';
														terminalCwd = '';
													} else {
														terminalServerId = server.id;
													}
													showTerminalDropdown = false;
													markDirty();
												}}
											>
												<div class="flex flex-1 gap-2 items-center truncate">
													<Cloud
														className="size-4 shrink-0 {terminalServerId === server.id
															? 'text-emerald-500'
															: 'text-gray-400'}"
														strokeWidth="2.5"
													/>
													<span class="truncate">{server.name || server.id}</span>
												</div>
												{#if terminalServerId === server.id}
													<svg
														xmlns="http://www.w3.org/2000/svg"
														viewBox="0 0 20 20"
														fill="currentColor"
														class="size-4 text-emerald-600 dark:text-emerald-400 shrink-0"
													>
														<path
															fill-rule="evenodd"
															d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
															clip-rule="evenodd"
														/>
													</svg>
												{/if}
											</button>
										{/each}
										{#if terminalServerId}
											<div
												class="border-t border-gray-100 dark:border-gray-800 mt-1.5 pt-1.5 px-0.5"
											>
												<div class="px-2.5 py-1 text-xs text-gray-500">
													{$i18n.t('Working Directory')}
												</div>
												<div class="px-2 pb-1">
													<input
														type="text"
														bind:value={terminalCwd}
														placeholder="/home/user/project"
														class="w-full bg-gray-50 dark:bg-gray-900 rounded-lg outline-hidden text-xs py-2 px-2.5 border-none placeholder:text-gray-400 dark:placeholder:text-gray-600"
														on:click={(e) => e.stopPropagation()}
														on:input={markDirty}
													/>
												</div>
											</div>
										{/if}
									</div>
								</Dropdown>
							</div>
						{/if}
					</div>
				</div>

<div>
					<div class="text-gray-500 text-xs mb-3">{$i18n.t('Status')}</div>
					<div class="space-y-2.5">
						<div class="flex items-center justify-between text-xs">
							<span class="text-gray-600 dark:text-gray-400">{$i18n.t('State')}</span>
							<div
								class="flex items-center gap-1.5 px-2.5 py-1 rounded-xl text-xs transition {is_active
									? 'text-emerald-700 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-500/10'
									: 'text-gray-600 dark:text-gray-400 bg-gray-100 dark:bg-gray-800'}"
							>
								<span
									class="inline-block size-1.5 rounded-full {is_active
										? 'bg-emerald-500'
										: 'bg-gray-400'}"
								></span>
								<span>{is_active ? $i18n.t('Active') : $i18n.t('Paused')}</span>
							</div>
						</div>

<div class="flex items-center justify-between text-xs">
							<span class="text-gray-600 dark:text-gray-400">{$i18n.t('Next run')}</span>
							<span class=" text-gray-700 dark:text-gray-300"
								>{formatNextRun(automation.next_runs?.[0] ?? automation.next_run_at)}</span
							>
						</div>
						<div class="flex items-center justify-between text-xs">
							<span class="text-gray-600 dark:text-gray-400">{$i18n.t('Last ran')}</span>
							<span class=" text-gray-700 dark:text-gray-300"
								>{automation.last_run_at
									? formatNextRun(automation.last_run_at)
									: $i18n.t('Never')}</span
							>
						</div>
					</div>
				</div>

<div class="flex-1 flex flex-col min-h-0">
					<div class="text-gray-500 text-xs mb-2 shrink-0">
						{$i18n.t('Execution Logs')}
					</div>
					<div class="flex-1 overflow-y-auto scrollbar-hidden w-full">
						{#if runsLoading}
							<div class="flex justify-center py-4">
								<Spinner className="size-4" />
							</div>
						{:else if runs.length === 0}
							<div class="text-xs text-gray-400 py-4 tabular-nums">
								{$i18n.t('No execution logs available yet')}
							</div>
						{:else}
							<div class="space-y-0.5 w-full">
								{#each runs as run (run.id)}
									<button
										class="w-full text-left flex items-center gap-2.5 px-3 py-2 rounded-xl hover:bg-gray-100/80 dark:hover:bg-gray-850/80 transition-colors {run.chat_id
											? 'cursor-pointer'
											: 'cursor-default'}"
										on:click={() => {
											if (run.chat_id) goto(`/c/${run.chat_id}`);
										}}
										type="button"
									>
										<div class="shrink-0 flex items-center justify-center">
											{#if run.status === 'success'}
												<svg
													xmlns="http://www.w3.org/2000/svg"
													viewBox="0 0 20 20"
													fill="currentColor"
													class="size-3 text-emerald-500"
													><path
														fill-rule="evenodd"
														d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
														clip-rule="evenodd"
													/></svg
												>
											{:else if run.status === 'error'}
												<svg
													xmlns="http://www.w3.org/2000/svg"
													viewBox="0 0 20 20"
													fill="currentColor"
													class="size-3 text-red-500"
													><path
														fill-rule="evenodd"
														d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z"
														clip-rule="evenodd"
													/></svg
												>
											{:else}
												<svg
													xmlns="http://www.w3.org/2000/svg"
													viewBox="0 0 20 20"
													fill="currentColor"
													class="size-3 text-blue-500"
													><path
														d="M10 18a8 8 0 100-16 8 8 0 000 16zm.75-13a.75.75 0 00-1.5 0v5c0 .414.336.75.75.75h4a.75.75 0 000-1.5h-3.25V5z"
													/></svg
												>
											{/if}
										</div>
										<div class="flex-1 min-w-0">
											<div class="text-xs text-gray-800 dark:text-gray-200 truncate">
												{automation.name}
											</div>
										</div>
										<span class="shrink-0 text-[10px] text-gray-500 font-mono"
											>{formatRunTime(run.created_at)}</span
										>
									</button>
								{/each}
							</div>
						{/if}
					</div>
				</div>
			</div>
		</div>
	</div>
</div>