{#if displayHeader} {/if} {#if description}

{description}

{/if}

{#if inputCat == 'number'} {#if extra['min'] != undefined && extra['max'] != undefined} {:else if extra['seconds'] !== undefined} {:else if extra?.currency} {:else}

{ ignoreValueUndefined = true }} class={valid ? '' : 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'} placeholder={placeholder ?? defaultValue ?? ''} bind:value min={extra['min']} max={extra['max']} />

{/if} {:else if inputCat == 'boolean'} { e?.stopPropagation() }} {disabled} class={valid ? '' : 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'} bind:checked={value} /> {#if type == 'boolean' && value == undefined} Not set {/if} {:else if inputCat == 'list' && !isListJson}

{#if Array.isArray(itemsType?.multiselect) && Array.isArray(value)}

{:else if itemsType?.enum != undefined && Array.isArray(itemsType?.enum) && Array.isArray(value)}

{:else}

{#key redraw} {#if Array.isArray(value)} {#each value ?? [] as v, i} {#if i < itemsLimit}

{#if itemsType?.type == 'number'} {:else if itemsType?.type == 'string' && itemsType?.contentEncoding == 'base64'} fileChanged(x, (val) => (value[i] = val))} multiple={false} /> {:else if itemsType?.type == 'object'} {:else if Array.isArray(itemsType?.enum)} { dispatch('focus') }} on:blur={(e) => { dispatch('blur') }} {defaultValue} {valid} {disabled} {autofocus} bind:value={v} enum_={itemsType?.enum ?? []} enumLabels={extra['enumLabels']} /> {:else} {/if}

{/if} {/each} {#if value.length > itemsLimit} {/if} {/if} {/key}

{/if}

{ evalValueToRaw() isListJson = !isListJson }} checked={isListJson} textClass="text-secondary" size="xs" options={{ right: 'json' }} />

{:else if inputCat == 'resource-object' && resourceTypes == undefined} Loading resource types... {:else if inputCat == 'resource-object' && (resourceTypes == undefined || (format.split('-').length > 1 && resourceTypes.includes(format.substring('resource-'.length))))} {:else if inputCat == 'resource-object' && format.split('-').length > 1 && format .replace('resource-', '') .replace('_', '') .toLowerCase() == 's3object'}

{#if s3FileUploadRawMode} { dispatch('focus') }} on:blur={(e) => { dispatch('blur') }} code={JSON.stringify(value ?? defaultValue ?? { s3: '' }, null, 2)} bind:value /> {:else} { value = { s3: evt.detail?.path ?? '' } }} on:deletion={(evt) => { value = { s3: '' } }} defaultValue={defaultValue?.s3} /> {/if}

{:else if inputCat == 'object' || inputCat == 'resource-object' || isListJson} {#if oneOf && oneOf.length >= 2}

{#if oneOf && oneOf.length >= 2} {#each oneOf as obj} {/each} {#if oneOfSelected} {@const objIdx = oneOf.findIndex((o) => o.title === oneOfSelected)} {@const obj = oneOf[objIdx]} {#if obj && obj.properties && Object.keys(obj.properties).length > 0}

{#if orderEditable} k !== 'label') ), order: obj.order?.filter((k) => k !== 'label') ?? undefined, $schema: '', required: obj.required ?? [], type: 'object' }} args={value} dndType={`nested-${title}`} on:reorder={(e) => { if (oneOf && oneOf[objIdx]) { const keys = e.detail oneOf[objIdx].order = keys } }} on:change /> {:else} k !== 'label') ), order: obj.order?.filter((k) => k !== 'label') ?? undefined, $schema: '', required: obj.required ?? [], type: 'object' }} bind:args={value} /> {/if}

{:else if disabled}

{:else}
									<JsonEditor
										bind:editor
										on:focus={(e) => {
											dispatch('focus')
										}}
										on:blur={(e) => {
											dispatch('blur')
										}}
										code={rawValue}
										bind:value
									/>
								{/if}
							{/if}
						{:else if disabled}
							<textarea disabled />
						{:else}
							<JsonEditor
								bind:editor
								on:focus={(e) => {
									dispatch('focus')
								}}
								on:blur={(e) => {
									dispatch('blur')
								}}
								code={rawValue}
								bind:value
							/>
						{/if}
					</div>
				{:else if properties && Object.keys(properties).length > 0}
					<div class="p-4 pl-8 border rounded-md w-full">
						{#if orderEditable}
							<SchemaFormDnd
								{onlyMaskPassword}
								{disablePortal}
								{disabled}
								schema={{
									properties,
									$schema: '',
									required: nestedRequired ?? [],
									type: 'object',
									order
								}}
								args={value}
								dndType={`nested-${title}`}
								on:reorder={(e) => {
									const keys = e.detail
									order = keys
								}}
								on:change
							/>
						{:else}
							<SchemaForm
								{onlyMaskPassword}
								{disablePortal}
								{disabled}
								schema={{
									properties,
									order,
									$schema: '',
									required: nestedRequired ?? [],
									type: 'object'
								}}
								bind:args={value}
							/>
						{/if}
					</div>
				{:else if disabled}
					<textarea disabled />
				{:else}
					<JsonEditor
						bind:editor
						on:focus={(e) => {
							dispatch('focus')
						}}
						on:blur={(e) => {
							dispatch('blur')
						}}
						code={rawValue}
						bind:value
					/>
				{/if}
				{#if inputCat == 'list'}
					<div class="block">
						<Toggle
							on:change={(e) => {
								isListJson = !isListJson
							}}
							checked={isListJson}
							textClass="text-secondary"
							size="xs"
							options={{ right: 'json' }}
						/>
					</div>
				{/if}
			{:else if inputCat == 'enum'}
				<div class="flex flex-row w-full gap-1">
					<ArgEnum
						{required}
						create={extra['disableCreate'] != true}
						{defaultValue}
						{valid}
						{disabled}
						bind:value
						{enum_}
						{autofocus}
						enumLabels={extra['enumLabels']}
					/>
				</div>
			{:else if inputCat == 'date'}
				{#if format === 'date'}
					<DateInput {autofocus} bind:value dateFormat={extra?.['dateFormat']} />
				{:else}
					<DateTimeInput useDropdown {autofocus} bind:value />
				{/if}
			{:else if inputCat == 'sql' || inputCat == 'yaml'}
				<div class="border my-1 mb-4 w-full border-primary">
					<SimpleEditor
						on:focus={(e) => {
							dispatch('focus')
						}}
						on:blur={(e) => {
							dispatch('blur')
						}}
						bind:this={editor}
						lang={inputCat}
						bind:code={value}
						autoHeight
					/>
				</div>
			{:else if inputCat == 'base64'}
				<div class="flex flex-col my-6 w-full">
					<input
						{autofocus}
						type="file"
						on:change={(x) => fileChanged(x, (val) => (value = val))}
						multiple={false}
					/>
					{#if value?.length}
						<div class="text-2xs text-tertiary mt-1">File length: {value.length} base64 chars</div>
					{/if}
				</div>
			{:else if inputCat == 'resource-string'}
				<ResourcePicker
					selectFirst
					{disablePortal}
					bind:value
					initialValue={defaultValue}
					resourceType={format && format.split('-').length > 1
						? format.substring('resource-'.length)
						: undefined}
					{showSchemaExplorer}
				/>
			{:else if inputCat == 'email'}
				<input
					{autofocus}
					on:focus
					on:blur
					{disabled}
					type="email"
					class={valid
						? ''
						: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-3'}
					placeholder={placeholder ?? defaultValue ?? ''}
					bind:value
				/>
			{:else if inputCat == 'string'}
				<div class="flex flex-col w-full">
					<div class="flex flex-row w-full items-center justify-between relative">
						{#if password || extra?.['password'] == true}
							{#if onlyMaskPassword}
								<Password
									{disabled}
									bind:password={value}
									placeholder={placeholder ?? defaultValue ?? ''}
								/>
							{:else}
								<PasswordArgInput {disabled} bind:value />
							{/if}
						{:else}
							{#key extra?.['minRows']}
								<textarea
									{autofocus}
									rows={extra?.['minRows'] ? extra['minRows']?.toString() : '1'}
									bind:this={el}
									on:focus={(e) => {
										dispatch('focus')
									}}
									on:blur={(e) => {
										dispatch('blur')
									}}
									use:autosize
									on:keydown={onKeyDown}
									{disabled}
									class={twMerge(
										'w-full',
										valid
											? ''
											: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-3'
									)}
									placeholder={placeholder ?? defaultValue ?? ''}
									bind:value
								/>
							{/key}
							{#if !disabled && itemPicker && extra?.['disableVariablePicker'] != true}
								
								<button
									class="absolute right-1 top-1 py-1 min-w-min !px-2 items-center text-gray-800 bg-surface-secondary border rounded center-center hover:bg-gray-300 transition-all cursor-pointer"
									on:click={() => {
										pickForField = label
										itemPicker?.openDrawer?.()
									}}
									title="Insert a Variable"
								>
									<DollarSign class="!text-tertiary" size={14} />
								</button>
							{/if}
						{/if}
					</div>
					{#if variableEditor}
						<div class="text-sm text-tertiary">
							{#if value && typeof value == 'string' && value?.startsWith('$var:')}
								Linked to variable <button
									class="text-blue-500 underline"
									on:click={() => variableEditor?.editVariable?.(value.slice(5))}
									>{value.slice(5)}</button
								>
							{/if}
						</div>
					{/if}
				</div>
			{/if}
			<slot name="actions" />
		</div>

{#if !compact || (error && error != '')}
			<div class="text-right text-xs text-red-600 dark:text-red-400">
				{#if disabled || error === ''}
					 
				{:else}
					{error}
				{/if}
			</div>
		{:else if !noMargin}
			<div class="mb-2" />
		{/if}
	</div>
</div>

/* Firefox */
	input[type='number'] {
		-moz-appearance: textfield !important;
	}
</style>