{name || $i18n.t("Automation")} • {$REXPRO

{#if isDirty} {/if}

{$i18n.t("Instructions")}

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

<div
				class="hidden md:flex w-full md:w-66 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-1">
						
						<div class="flex items-center justify-between text-xs">
							<span class="text-gray-600 dark:text-gray-400"
								>{$i18n.t("Repeats")}</span
							>
							<ScheduleDropdown
								bind:this={scheduleDropdown}
								side="bottom"
								align="end"
								onChange={markDirty}
							/>
						</div>

<div class="flex items-center justify-between text-xs">
							<span class="text-gray-600 dark:text-gray-400"
								>{$i18n.t("Model")}</span
							>
							<ModelDropdown
								bind:model_id
								side="bottom"
								align="end"
								onChange={markDirty}
							/>
						</div>
					</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
							>
							<span
								class="flex items-center gap-1.5 text-xs {is_active
									? 'text-emerald-700 dark:text-emerald-400'
									: 'text-gray-600 dark:text-gray-400'}"
							>
								<span
									class="inline-block size-1.5 rounded-full {is_active
										? 'bg-emerald-500'
										: 'bg-gray-400'}"
								></span>
								{is_active
									? $i18n.t("Active")
									: $i18n.t("Paused")}
							</span>
						</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 -mx-1">
					<div class="text-gray-500 text-xs mb-2 mx-1 shrink-0">
						{$i18n.t("Execution Logs")}
					</div>
					<div
						class="flex-1 overflow-y-auto scrollbar-hidden w-full"
						on:scroll={onScroll}
					>
						{#if runsLoading && runs.length === 0}
							<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-2.5 py-1.5 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}

{#if runsLoading && runs.length > 0}
									<div class="flex justify-center py-4">
										<Spinner className="size-4" />
									</div>
								{/if}
							</div>
						{/if}
					</div>
				</div>
			</div>
		</div>
	</div>
</div>