{ if (initialPath == '' && script.summary?.length > 0 && !dirtyPath) { path?.setName( script.summary .toLowerCase() .replace(/[^a-z0-9_]/g, '_') .replace(/-+/g, '_') .replace(/^-|-$/g, '') ) } }} />

</Label>
									</div>
								</Section>

<Section label="Language">
									{#if lockedLanguage}
										<div class="text-sm text-tertiary italic mb-2">
											As a forked script, the language '{script.language}' cannot be modified.
										</div>
									{/if}
									<div class=" grid grid-cols-3 gap-2">
										{#each langs as [label, lang]}
											{@const isPicked = script.language == lang && template == 'script'}
											<Popover
												disablePopup={!enterpriseLangs.includes(lang) || !!$enterpriseLicense}
											>
												<Button
													size="sm"
													variant="border"
													color={isPicked ? 'blue' : 'light'}
													btnClasses={isPicked
														? '!border-2 !bg-blue-50/75 dark:!bg-frost-900/75'
														: 'm-[1px]'}
													on:click={() => {
														template = 'script'
														initContent(lang, script.kind, template)
														script.language = lang
													}}
													disabled={lockedLanguage ||
														(enterpriseLangs.includes(lang) && !$enterpriseLicense)}
												>
													<LanguageIcon {lang} />
													<span class="ml-2 py-2 truncate">{label}</span>
												</Button>
												<svelte:fragment slot="text"
													>{label} is only available with an enterprise license</svelte:fragment
												>
											</Popover>
										{/each}
										<Button
											size="sm"
											variant="border"
											color={template == 'docker' ? 'blue' : 'light'}
											btnClasses={template == 'docker'
												? '!border-2 !bg-blue-50/75 dark:!bg-frost-900/75'
												: 'm-[1px]'}
											disabled={lockedLanguage}
											on:click={() => {
												if (isCloudHosted()) {
													sendUserToast(
														'You cannot use Docker scripts on the multi-tenant platform. Use a dedicated instance or self-host windmill instead.',
														true,
														[
															{
																label: 'Learn more',
																callback: () => {
																	window.open(
																		'https://www.windmill.dev/docs/advanced/docker',
																		'_blank'
																	)
																}
															}
														]
													)
													return
												}
												template = 'docker'
												initContent(Script.language.BASH, script.kind, template)
												script.language = Script.language.BASH
											}}
										>
											<LanguageIcon lang="docker" /><span class="ml-2 py-2">Docker</span>
										</Button>
									</div>
								</Section>

<Section label="Script kind">
									<svelte:fragment slot="header">
										<Tooltip>
											Tag this script's purpose within flows such that it is available as the
											corresponding action.
										</Tooltip>
									</svelte:fragment>
									<ToggleButtonGroup
										class="h-10"
										selected={script.kind}
										on:selected={({ detail }) => {
											template = 'script'
											script.kind = detail
											initContent(script.language, detail, template)
										}}
									>
										{#each scriptKindOptions as { value, title, desc, documentationLink, Icon }}
											<ToggleButton
												label={title}
												{value}
												tooltip={desc}
												{documentationLink}
												icon={Icon}
												showTooltipIcon={Boolean(desc)}
											/>
										{/each}
									</ToggleButtonGroup>
								</Section>
							</div>
						</TabContent>
						<TabContent value="runtime">
							<div class="flex flex-col gap-8">
								<Section label="Concurrency limits" eeOnly>
									<div class="flex flex-col gap-4">
										<Label label="Max number of executions within the time window">
											<div class="flex flex-row gap-2 max-w-sm">
												<input
													disabled={!$enterpriseLicense}
													bind:value={script.concurrent_limit}
													type="number"
												/>
												<Button
													size="sm"
													color="light"
													on:click={() => {
														script.concurrent_limit = undefined
														script.concurrency_time_window_s = undefined
													}}
													variant="border">Remove Limits</Button
												>
											</div>
										</Label>
										<Label label="Time window in seconds">
											<SecondsInput
												disabled={!$enterpriseLicense}
												bind:seconds={script.concurrency_time_window_s}
											/>
										</Label>
									</div>
								</Section>
								<Section label="Worker group tag">
									<svelte:fragment slot="header">
										<Tooltip
											documentationLink="https://www.windmill.dev/docs/core_concepts/worker_groups"
										>
											The script will be executed on a worker configured to accept its worker group
											tag. For instance, you could setup an "highmem", or "gpu" worker group.
										</Tooltip>
									</svelte:fragment>

{#if $workerTags}
										{#if $workerTags?.length > 0}
											<div class="max-w-sm">
												<select
													bind:value={script.tag}
													on:change={(e) => {
														if (script.tag == '') {
															script.tag = undefined
														}
													}}
												>
													{#if script.tag}
														<option value="">reset to default</option>
													{:else}
														<option value="" disabled selected>Worker Group</option>
													{/if}
													{#each $workerTags ?? [] as tag (tag)}
														<option value={tag}>{tag}</option>
													{/each}
												</select>
											</div>
										{:else}
											<div class="text-sm text-secondary flex flex-row gap-2">
												No custom worker group tag defined on this instance in "Workers {'->'} Assignable
												Tags"
												<a
													href="https://www.windmill.dev/docs/core_concepts/worker_groups"
													target="_blank"
													class="hover:underline"
												>
													<div class="flex flex-row gap-2 items-center">
														See documentation
														<ExternalLink size="12" />
													</div>
												</a>
											</div>
										{/if}
									{:else}
										<Loader2 class="animate-spin" />
									{/if}
								</Section>
								<Section label="Cache">
									<div class="flex gap-2 shrink flex-col">
										<Toggle
											size="sm"
											checked={Boolean(script.cache_ttl)}
											on:change={() => {
												if (script.cache_ttl && script.cache_ttl != undefined) {
													script.cache_ttl = undefined
												} else {
													script.cache_ttl = 300
												}
											}}
											options={{
												right: 'Cache the results for each possible inputs'
											}}
										/>
										<span class="text-secondary text-sm leading-none">
											How long to the keep cache valid
										</span>
										{#if script.cache_ttl}
											<SecondsInput bind:seconds={script.cache_ttl} />
										{:else}
											<SecondsInput disabled />
										{/if}
									</div>
								</Section>
								<Section label="Dedicated Workers" eeOnly>
									<Toggle
										disabled={!$enterpriseLicense ||
											isCloudHosted() ||
											(script.language != Script.language.BUN &&
												script.language != Script.language.PYTHON3 &&
												script.language != Script.language.DENO)}
										size="sm"
										checked={Boolean(script.dedicated_worker)}
										on:change={() => {
											if (script.dedicated_worker) {
												script.dedicated_worker = undefined
											} else {
												script.dedicated_worker = true
											}
										}}
										options={{
											right: 'Script is run on dedicated workers'
										}}
									/>
									{#if script.dedicated_worker}
										<div class="py-2">
											<Alert type="info" title="Require dedicated workers">
												One worker in a worker group needs to be configured with dedicated worker
												set to: <pre>{$workspaceStore}:{script.path}</pre>
											</Alert>
										</div>
									{/if}
									<svelte:fragment slot="header">
										<Tooltip
											>In this mode, the script is meant to be run on dedicated workers that run the
											script at native speed. Can reach >1500rps per dedicated worker. Only
											available on enterprise edition and for Python3, Deno and Bun. For other
											languages, the efficiency is already on par with deidcated workers since they
											do not spawn a full runtime</Tooltip
										>
									</svelte:fragment>
								</Section>
								{#if !isCloudHosted()}
									<Section label="High priority script">
										<Toggle
											disabled={!$enterpriseLicense || isCloudHosted()}
											size="sm"
											checked={script.priority !== undefined && script.priority > 0}
											on:change={() => {
												if (script.priority) {
													script.priority = undefined
												} else {
													script.priority = 100
												}
											}}
											options={{
												right: 'Label as high priority'
											}}
										>
											<svelte:fragment slot="right">
												<input
													type="number"
													class="!w-16 ml-4"
													disabled={script.priority === undefined}
													bind:value={script.priority}
													on:focus
													on:change={() => {
														if (script.priority && script.priority > 100) {
															script.priority = 100
														} else if (script.priority && script.priority < 0) {
															script.priority = 0
														}
													}}
												/>
											</svelte:fragment>
										</Toggle>
										<svelte:fragment slot="header">
											
											<Tooltip>
												Jobs from script labeled as high priority take precedence over the other
												jobs when in the jobs queue.
												{#if !$enterpriseLicense}This is a feature only available on enterprise
													edition.{/if}
											</Tooltip>
										</svelte:fragment>
									</Section>
								{/if}
								{#if !isCloudHosted()}
									<Section label="Custom env variables">
										<svelte:fragment slot="header">
											<Tooltip
												documentationLink="https://www.windmill.dev/docs/reference#custom-environment-variables"
											>
												Additional static custom env variables to pass to the script.
											</Tooltip>
										</svelte:fragment>
										{#if script.envs && script.envs.length > 0}
											<Alert type="warning" title="Not passed in previews" size="xs">
												Static envs variables are not passed in preview but solely on deployed
												scripts.
											</Alert>
										{/if}
										<div class="w-full mt-2">
											<span class="text-tertiary text-xs pb-2">Format is: `{'<KEY>=<VALUE>'}`</span>
											{#if Array.isArray(script.envs ?? [])}
												{#each script.envs ?? [] as v, i}
													<div class="flex max-w-md mt-1 w-full items-center relative">
														<input type="text" bind:value={v} placeholder="<KEY>=<VALUE>" />
														<button
															transition:fade|local={{ duration: 50 }}
															class="rounded-full p-1 bg-surface/60 duration-200 hover:bg-gray-200 absolute right-2"
															aria-label="Clear"
															on:click={() => {
																script.envs && script.envs.splice(i, 1)
																script.envs = script.envs
															}}
														>
															<X size={14} />
														</button>
													</div>
												{/each}
											{/if}
										</div>
										<div class="flex mt-2">
											<Button
												variant="border"
												color="light"
												size="xs"
												on:click={() => {
													if (script.envs == undefined || !Array.isArray(script.envs)) {
														script.envs = []
													}
													script.envs = script.envs.concat('')
												}}
											>
												<div class="flex flex-row gap-1">
													<Plus size="16" />
													Add item
												</div>
											</Button>
										</div>
									</Section>
								{/if}
							</div>
						</TabContent>
						<TabContent value="ui">
							<div class="mt-4" />
							<ScriptSchema bind:schema={script.schema} />
						</TabContent>
					</div>
				</svelte:fragment>
			</Tabs>
		</DrawerContent>
	</Drawer>

<div class="flex flex-col h-screen">
		<div class="flex h-12 items-center px-4">
			<div class="justify-between flex gap-2 lg:gap-8 w-full items-center">
				<div class="flex flex-row gap-2">
					<div class="center-center">
						<button
							on:click={async () => {
								metadataOpen = true
							}}
						>
							<LanguageIcon lang={script.language} height={20} />
						</button>
					</div>
					<div class="min-w-64 w-full max-w-md">
						<input
							type="text"
							placeholder="Script summary"
							class="text-sm w-full font-semibold"
							bind:value={script.summary}
						/>
					</div>
				</div>

<div class="gap-4 flex">
					<div class="flex justify-start w-full">
						<div>
							<button
								on:click={async () => {
									metadataOpen = true
								}}
							>
								<Badge
									color="gray"
									class="center-center !bg-surface-selected !text-tertiary !h-[28px]  !w-[70px] rounded-r-none"
								>
									<Pen size={12} class="mr-2" /> Path
								</Badge>
							</button>
						</div>
						<input
							type="text"
							readonly
							value={script.path}
							size={script.path?.length || 50}
							class="font-mono !text-xs !min-w-[96px] !max-w-[300px] !w-full !h-[28px] !my-0 !py-0 !border-l-0 !rounded-l-none"
							on:focus={({ currentTarget }) => {
								currentTarget.select()
							}}
						/>
					</div>
				</div>

{#if $enterpriseLicense && initialPath != ''}
					<Awareness />
				{/if}

<div class="flex flex-row gap-x-1 lg:gap-x-2">
					<Button
						color="light"
						variant="border"
						size="xs"
						on:click={() => {
							if (!savedScript) {
								return
							}
							diffDrawer?.openDrawer()
							diffDrawer?.setDiff({
								mode: 'normal',
								deployed: savedScript,
								draft: savedScript['draft'],
								current: script
							})
						}}
						disabled={!savedScript || !diffDrawer}
					>
						<div class="flex flex-row gap-2 items-center">
							<DiffIcon size={14} />
							Diff
						</div>
					</Button>
					<Button
						color="light"
						variant="border"
						size="xs"
						on:click={() => {
							metadataOpen = true
						}}
						startIcon={{ icon: Settings }}
					>
						Settings
					</Button>
					<Button
						loading={loadingDraft}
						size="xs"
						startIcon={{ icon: Save }}
						on:click={() => saveDraft()}
						disabled={initialPath != '' && !savedScript}
					>
						<span class="hidden sm:flex">
							Save draft <Kbd small isModifier>{getModifierKey()}</Kbd>
						</span>
						<Kbd small>S</Kbd>
					</Button>
					<Button
						loading={loadingSave}
						size="xs"
						startIcon={{ icon: Save }}
						on:click={() => editScript()}
						dropdownItems={computeDropdownItems(initialPath)}
					>
						Deploy
					</Button>
				</div>
			</div>
		</div>

<ScriptEditor
			collabMode
			edit={initialPath != ''}
			on:format={() => {
				saveDraft()
			}}
			bind:editor
			bind:this={scriptEditor}
			bind:schema={script.schema}
			path={script.path}
			bind:code={script.content}
			lang={script.language}
			{initialArgs}
			kind={script.kind}
			{template}
			tag={script.tag}
		/>
	</div>
{:else}
	Script Builder not available to operators
{/if}