{#if !$userStore?.operator} (metadataOpen = false)}>

Path

Summary

Language

{#if lockedLanguage}

As a forked script, the language '{script.language}' cannot be modified.

{/if}

{#each langs as [label, lang]} {@const isPicked = script.language == lang && template == 'script'} {/each}

Description

<h2 class="border-b pb-1 mt-10 mb-4"
				>Worker group tag <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
				></h2
			>
			<div class="max-w-sm">
				{#if $workerTags}
					{#if $workerTags?.length > 0}
						<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>
					{:else}
						<div class="text-sm text-gray-600 italic mb-2">
							No custom worker group defined on this instance
						</div>
					{/if}
				{/if}
			</div>
			{#if !isCloudHosted()}
				<h2 class="border-b pb-1 mt-10 mb-4"
					>Custom env variables<Tooltip
						documentationLink="https://www.windmill.dev/docs/reference#custom-environment-variables"
						>Additional static custom env variables to pass to the script.</Tooltip
					></h2
				>
				<div class="w-full">
					<span class="text-gray-600 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">
								<input type="text" bind:value={v} placeholder="<KEY>=<VALUE>" />
								<button
									transition:fade|local={{ duration: 50 }}
									class="rounded-full p-1 bg-white/60 duration-200 hover:bg-gray-200"
									aria-label="Clear"
									on:click={() => {
										script.envs && script.envs.splice(i, 1)
										script.envs = script.envs
									}}
								>
									<X size={14} />
								</button>
							</div>
						{/each}
						{#if script.envs && script.envs.length > 0}
							<div class="pt-2" />
							<Alert type="warning" title="Not passed in previews"
								>Static envs variables are not passed in preview but solely on deployed scripts.</Alert
							>
						{/if}
					{/if}
				</div>
				<div class="flex mt-2">
					<Button
						variant="border"
						color="dark"
						size="xs"
						btnClasses="mt-1"
						on:click={() => {
							if (script.envs == undefined || !Array.isArray(script.envs)) {
								script.envs = []
							}
							script.envs = script.envs.concat('')
						}}
					>
						<Icon data={faPlus} class="mr-2" />
						Add item
					</Button>
				</div>
			{/if}
		</DrawerContent>
	</Drawer>

<div class="flex flex-col h-screen">
		<div class="flex h-full max-h-12 items-center pl-2.5 pr-6 border-b shadow-sm">
			<div class="justify-between flex gap-2 lg:gap-8 w-full items-center">
				<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 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-gray-300 !text-gray-600 !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>
				<div class="center-center">
					<button
						on:click={async () => {
							metadataOpen = true
						}}
					>
						<LanguageIcon lang={script.language} />
					</button>
				</div>
				{#if $enterpriseLicense && initialPath != ''}
					<Awareness />
				{/if}

<div class="flex flex-row gap-x-1 lg:gap-x-4">
					<Button
						color="light"
						variant="border"
						size="xs"
						on:click={() => {
							metadataOpen = true
						}}
					>
						Metadata
					</Button>
					<Button
						color="dark"
						variant="border"
						size="xs"
						on:click={() => {
							advancedOpen = true
						}}
					>
						Customise
					</Button>
					<Button
						loading={loadingDraft}
						size="xs"
						startIcon={{ icon: faSave }}
						on:click={() => saveDraft()}
					>
						<span class="hidden sm:flex">
							Save draft <Kbd small>{getModifierKey()}</Kbd>
						</span>
						<Kbd small>S</Kbd>
					</Button>
					<Button
						loading={loadingSave}
						size="xs"
						startIcon={{ icon: faSave }}
						on:click={() => editScript()}
						dropdownItems={initialPath != '' ? computeDropdownItems : undefined}
					>
						Deploy
					</Button>
				</div>
			</div>
		</div>

<Drawer bind:open={advancedOpen} size="800px">
			<DrawerContent title="Customise" on:close={() => (advancedOpen = false)}>
				{#if SCRIPT_CUSTOMISE_SHOW_KIND}
					<h2 class="border-b pb-1 mb-4">
						Script kind  
						<Tooltip>
							Tag this script's purpose within flows such that it is available as the corresponding
							action.
						</Tooltip>
					</h2>
					<div class="flex flex-wrap gap-2">
						{#each scriptKindOptions as { value, title, desc, documentationLink }}
							{@const isPicked = script.kind === value}
							<Button
								size="sm"
								variant="border"
								color={isPicked ? 'blue' : 'dark'}
								btnClasses="font-medium {isPicked ? '!bg-blue-50/75' : ''}"
								on:click={() => {
									template = 'script'
									script.kind = value
									initContent(script.language, value, template)
								}}
							>
								{title}
								{#if desc}
									<Tooltip {documentationLink} class="mb-0.5 ml-1">
										{desc}
									</Tooltip>
								{/if}
							</Button>
						{/each}
					</div>
				{/if}
				<h2 class="border-b pb-1 mt-10 mb-4"
					>Arguments  <Tooltip
						>The arguments are synced with the main signature but you may refine the parts that
						cannot be inferred from the type directly.</Tooltip
					></h2
				>
				<ScriptSchema bind:schema={script.schema} />
			</DrawerContent>
		</Drawer>

<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}
			tag={script.tag}
		/>
	</div>
{:else}
	Script Builder not available to operators
{/if}