Name

{error}

Description

</label>

<label class="block">
				<div class="mb-1 font-semibold text-secondary"> Custom Title </div>
				<textarea placeholder="Enter a custom title" rows="1" bind:value={property.title} />
			</label>
			<div>
				<div class="mb-1 font-semibold text-secondary">Type<Required required={true} /></div>
				<div class="grid sm:grid-cols-3 md:grid-cols-4 gap-x-2 gap-y-1 items-center mb-2 w-full">
					{#each ARG_TYPES as argType}
						{@const isSelected =
							(argType === 'S3' && property.format === 'resource-s3_object') ||
							(argType === property.selectedType && property.format !== 'resource-s3_object')}
						<Button
							size="sm"
							variant="border"
							color={isSelected ? 'blue' : 'light'}
							btnClasses={isSelected ? '!border-2' : 'm-[1px]'}
							on:click={() => {
								const isS3 = argType == 'S3'

if (isS3) {
									property.selectedType = 'object'
									property.format = 'resource-s3_object'
								} else {
									property.format = undefined
									property.selectedType = argType
								}

property.contentEncoding = undefined
								property.enum_ = undefined
								property.pattern = undefined
								property.default = undefined
								property.min = undefined
								property.max = undefined
								property.currency = undefined
								property.currencyLocale = undefined
								property.multiselect = undefined
								property.password = undefined
								property.dateFormat = undefined
								if (argType == 'array') {
									property.items = { type: 'string' }
								} else {
									property.items = undefined
								}
								property.showExpr = undefined
							}}
							id={`schema-modal-type-${argType}`}
						>
							{argTypesLabels[argType]}
						</Button>
					{/each}
					<Button
						size="sm"
						variant="border"
						color={!property.selectedType ? 'blue' : 'light'}
						btnClasses={!property.selectedType ? '!border-2' : 'm-[1px]'}
						on:click={() => {
							property.selectedType = undefined
						}}
					>
						any
					</Button>
				</div>
			</div>
			<div>
				<div class="flex flex-row gap-x-4 items-center">
					<ArgInput
						{itemPicker}
						resourceTypes={getResourceTypesFromFormat(property.format)}
						label="Default"
						bind:value={property.default}
						type={property.password ? 'string' : property.selectedType}
						pattern={property.pattern}
						customErrorMessage={property.customErrorMessage}
						itemsType={property.items}
						contentEncoding={property.contentEncoding}
						format={property.format}
						extra={property.password ? {} : property}
						nullable={property.nullable}
						title={property.title}
						placeholder={property.placeholder}
						{variableEditor}
					/>
					<div>
						<Toggle
							options={{ right: 'Required' }}
							size="xs"
							bind:checked={property.required}
							on:change={(event) => {
								if (event?.detail) {
									property.nullable = false
								}
							}}
						/>
						{#if property?.selectedType === 'string'}
							<Toggle
								options={{
									right: 'Nullable',
									rightTooltip:
										'If enabled, the default value will be null and not an empty string.'
								}}
								size="xs"
								bind:checked={property.nullable}
								disabled={property?.required}
							/>
						{/if}
					</div>
				</div>
				{#if isFlowInput}
					<Alert type="info" title="Default not used by webhooks" size="xs" collapsible>
						If this flow is triggered by a webhook, the default value will not replace a missing
						value from the payload. It will only be used as the default value in the autogenerated
						UI. We recommend using default values in the signature of the steps where this value is
						used (using `x=default`) to have the desired behavior.
					</Alert>
				{/if}
			</div>
			<div>
				<div class="font-semibold text-secondary mb-1">Advanced</div>
				{#if property.selectedType == 'string'}
					<StringTypeNarrowing
						bind:customErrorMessage={property.customErrorMessage}
						bind:format={property.format}
						bind:pattern={property.pattern}
						bind:enum_={property.enum_}
						bind:contentEncoding={property.contentEncoding}
						bind:password={property.password}
						bind:dateFormat={property.dateFormat}
						noExtra
					/>
				{:else if property.selectedType == 'array'}
					<ArrayTypeNarrowing bind:itemsType={property.items} />
				{:else if property.selectedType == 'number' || property.selectedType == 'integer'}
					<NumberTypeNarrowing
						bind:min={property.min}
						bind:max={property.max}
						bind:currency={property.currency}
						bind:currencyLocale={property.currencyLocale}
					/>
				{:else if property.selectedType == 'object' && property.format !== 'resource-s3'}
					<Tabs selected="resource">
						<Tab value="resource">Resource</Tab>
						<Tab value="custom-object">Custom Object</Tab>
						<svelte:fragment slot="content">
							<div class="pt-2">
								<TabContent value="custom-object">
									<SchemaEditor bind:schema={property.schema} />
								</TabContent>

<TabContent value="resource">
									<h3 class="mb-2 font-bold mt-4">Resource type</h3>
									<ObjectTypeNarrowing bind:format={property.format} />
								</TabContent>
							</div>
						</svelte:fragment>
					</Tabs>
				{/if}
				{#if property && shouldDisplayPlaceholderForProperty(property)}
					<Label label="Placeholder" class="pt-2">
						<textarea
							placeholder="Enter a placeholder"
							rows="1"
							bind:value={property.placeholder}
						/>
					</Label>
				{/if}

<div class="pt-2">
					<Toggle
						options={{ right: 'Show this field only when conditions are met' }}
						class="!justify-start"
						checked={Boolean(property.showExpr)}
						on:change={() => {
							property.showExpr = property.showExpr ? undefined : 'true //fields.foo == 42'
						}}
					/>
					{#if property.showExpr != undefined}
						<div class="border">
							<SimpleEditor
								extraLib={`declare const fields: Record<${propsNames
									.filter((x) => x != property.name)
									.map((x) => `"${x}"`)
									.join(' | ')}, any>;\n`}
								lang="javascript"
								bind:code={property.showExpr}
								shouldBindKey={false}
								fixedOverflowWidgets={false}
								autoHeight
							/>
						</div>
						<div class="flex flex-row-reverse text-2xs text-tertiary"
							><div
								>Other fields are available under <code>fields</code> (e.g:
								<code>fields.foo == 42</code>)</div
							></div
						>
					{/if}
				</div>
			</div>
		</div>
		<div class="font-semibold text-secondary mb-1 pt-4">Preview</div>
		<LightweightSchemaForm
			displayType={false}
			schema={{
				properties: {
					[property.name]: modalToSchema(property)
				},
				required: property.required ? [property.name] : []
			}}
		/>
		<svelte:fragment slot="actions">
			<div class="h-10" />
			<Button
				color="dark"
				disabled={!property.name || error != ''}
				on:click={() => {
					dispatch('save', property)
				}}
				id="schema-modal-save"
			>
				Save
			</Button>
		</svelte:fragment>
	</DrawerContent>
</Drawer>

{#if isFlowInput}
	<ItemPicker
		bind:this={itemPicker}
		pickCallback={(path, _) => {
			if (property) {
				property.default = '$var:' + path
			}
		}}
		itemName="Variable"
		tooltip="Variables are dynamic values that have a key associated to them and can be retrieved during the execution of a Script or Flow."
		documentationLink="https://www.windmill.dev/docs/core_concepts/variables_and_secrets"
		extraField="path"
		loadItems={async () =>
			(await VariableService.listVariable({ workspace: $workspaceStore ?? '' })).map((x) => ({
				name: x.path,
				...x
			}))}
	>
		<div slot="submission">
			<Button
				variant="border"
				color="blue"
				size="sm"
				startIcon={{ icon: Plus }}
				on:click={() => variableEditor?.initNew?.()}
			>
				New Variable
			</Button>
		</div>
	</ItemPicker>
{/if}