{#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

</DrawerContent>
	</Drawer>

<div class="flex flex-col h-screen">
		<div class="flex flex-col w-full px-2 py-1 border-b shadow-sm">
			<div class="justify-between flex gap-8 w-full items-center px-2">
				<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>
				<div class="flex flex-row gap-x-4">
					<Button
						color="dark"
						variant="border"
						size="xs"
						on:click={() => {
							advancedOpen = true
						}}
					>
						Customise
					</Button>
					<Button
						disabled={!$dirtyStore}
						color="dark"
						loading={loadingSave}
						size="sm"
						startIcon={{ icon: faSave }}
						on:click={() => editScript(false)}
						dropdownItems={computeDropdownItems}
					>
						Save
					</Button>
				</div>
			</div>
		</div>

<Drawer bind:open={advancedOpen} size="800px">
			<DrawerContent title="Customise" on:close={() => (advancedOpen = false)}>
				<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 }}
						{@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)
								setCode(script.content)
							}}
						>
							{title}
							{#if desc}
								<Tooltip class="mb-0.5 ml-1">
									{desc}
								</Tooltip>
							{/if}
						</Button>
					{/each}
				</div>
				<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
			bind:editor
			bind:this={scriptEditor}
			bind:schema={script.schema}
			path={script.path}
			bind:code={script.content}
			lang={script.language}
			{initialArgs}
			kind={script.kind}
		/>
	</div>
{:else}
	Script Builder not available to operators
{/if}