{#if displayHeader} {/if} {#if editableSchema}

{ seeEditable = !seeEditable }} > Customize property {#if seeEditable}

Description

{#if type == 'string' && format != 'date-time'}
								<StringTypeNarrowing bind:format bind:pattern bind:enum_ bind:contentEncoding />
							{:else if type == 'number'}
								<NumberTypeNarrowing bind:min={extra['min']} bind:max={extra['max']} />
							{:else if type == 'object'}
								<ObjectTypeNarrowing bind:format />
							{:else if type == 'array'}
								<select bind:value={itemsType}>
									<option value={undefined}>No specific item type</option>
									<option value={{ type: 'string' }}> Items are strings</option>
									<option value={{ type: 'number' }}>Items are numbers</option>
									<option value={{ type: 'string', contentEncoding: 'base64' }}
										>Items are bytes</option
									>
								</select>
							{/if}
						</label>
					</div>
				{/if}
			</div>
			<span class="text-2xs">Input preview:</span>
		{/if}

{#if description}
			<div class="text-sm italic pb-1">
				{description}
			</div>
		{/if}

<div class="flex space-x-1">
			{#if inputCat == 'number'}
				{#if extra['min'] != undefined && extra['max'] != undefined}
					<div class="flex w-full gap-1">
						<span>{extra['min']}</span>
						<div class="grow">
							<Range bind:value min={extra['min']} max={extra['max']} />
						</div>
						<span>{extra['max']}</span>
						<span class="mx-2"><Badge large color="blue">{value}</Badge></span>
					</div>
				{:else}
					<input
						{autofocus}
						on:focus
						{disabled}
						type="number"
						class={valid
							? ''
							: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}
						placeholder={defaultValue ?? ''}
						bind:value
						min={extra['min']}
						max={extra['max']}
						on:input={() => dispatch('input', { value, isRaw: true })}
					/>
				{/if}
			{:else if inputCat == 'boolean'}
				<Toggle
					{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}
					<span>  Not set</span>
				{/if}
			{:else if inputCat == 'list'}
				<div>
					<div>
						{#each value ?? [] as v, i}
							<div class="flex flex-row max-w-md mt-1">
								{#if itemsType?.type == 'number'}
									<input autofocus={autofocus && i == 0} type="number" bind:value={v} />
								{:else if itemsType?.type == 'string' && itemsType?.contentEncoding == 'base64'}
									<input
										autofocus={autofocus && i == 0}
										type="file"
										class="my-6"
										on:change={(x) => fileChanged(x, (val) => (value[i] = val))}
										multiple={false}
									/>
								{:else}
									<input autofocus={autofocus && i == 0} type="text" bind:value={v} />
								{/if}
								<Button
									variant="border"
									color="red"
									size="sm"
									btnClasses="mx-6"
									on:click={() => {
										value = value.filter((el) => el != v)
										if (value.length == 0) {
											value = undefined
										}
									}}
								>
									<Icon data={faMinus} />
								</Button>
							</div>
						{/each}
					</div>
					<Button
						variant="border"
						color="blue"
						size="sm"
						btnClasses="mt-1"
						on:click={() => {
							if (value == undefined || !Array.isArray(value)) {
								value = []
							}
							value = value.concat('')
						}}
					>
						<Icon data={faPlus} class="mr-2" />
						Add item
					</Button>
					<span class="ml-2">
						{(value ?? []).length} item{(value ?? []).length > 1 ? 's' : ''}
					</span>
				</div>
			{:else if inputCat == 'resource-object'}
				<ObjectResourceInput {format} bind:value />
			{:else if inputCat == 'object'}
				{#if properties && Object.keys(properties).length > 0}
					<div class="p-4 pl-8 border rounded w-full">
						<SchemaForm
							{disabled}
							schema={{ properties, $schema: '', required: [], type: 'object' }}
							bind:args={value}
						/>
					</div>
				{:else}
					<textarea
						bind:this={el}
						on:focus
						{autofocus}
						{disabled}
						use:autosize
						style="max-height: {maxHeight}"
						on:input={() => {
							dispatch('input', { rawValue: value, isRaw: false })
						}}
						class="col-span-10 {valid
							? ''
							: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}"
						placeholder={defaultValue ? JSON.stringify(defaultValue, null, 4) : ''}
						bind:value={rawValue}
					/>
				{/if}
			{:else if inputCat == 'enum'}
				<select {disabled} class="px-6" bind:value>
					{#each enum_ ?? [] as e}
						<option>{e}</option>
					{/each}
				</select>
			{:else if inputCat == 'date'}
				<input {autofocus} class="inline-block" type="datetime-local" bind:value />
			{:else if inputCat == 'sql' || inputCat == 'yaml'}
				<div class="border my-1 mb-4 w-full border-gray-400">
					<SimpleEditor
						on:focus={() => dispatch('focus')}
						on:blur={() => dispatch('blur')}
						bind:this={editor}
						lang={inputCat}
						bind:code={value}
						on:change={async () => {
							dispatch('input', { rawValue: value, isRaw: false })
						}}
						autoHeight
					/>
				</div>
			{:else if inputCat == 'base64'}
				<input
					{autofocus}
					type="file"
					class="my-6"
					on:change={(x) => fileChanged(x, (val) => (value = val))}
					multiple={false}
				/>
			{:else if inputCat == 'resource-string'}
				<ResourcePicker
					bind:value
					resourceType={format.split('-').length > 1
						? format.substring('resource-'.length)
						: undefined}
				/>
			{:else if inputCat == 'string'}
				<div class="flex flex-col w-full">
					<div class="flex flex-row w-full items- justify-between">
						{#if password}
							<Password {disabled} bind:password={value} />
						{:else}
							<textarea
								{autofocus}
								rows="1"
								bind:this={el}
								on:focus={() => dispatch('focus')}
								on:blur={() => dispatch('blur')}
								use:autosize
								type="text"
								{disabled}
								class="col-span-10 {valid
									? ''
									: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}"
								placeholder={defaultValue ?? ''}
								bind:value
								on:input={() => {
									dispatch('input', { rawValue: value, isRaw: false })
								}}
							/>
							{#if itemPicker}
								<div class="ml-1 relative">
									<Button
										{disabled}
										variant="border"
										color="blue"
										size="sm"
										btnClasses="min-w-min min-h-[34px] items-center leading-4 py-0"
										on:click={() => {
											pickForField = label
											itemPicker?.openDrawer?.()
										}}><Icon data={faDollarSign} /></Button
									>
								</div>
							{/if}
						{/if}
					</div>
					{#if variableEditor}
						<div class="text-sm text-gray-600">
							{#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}
			{#if !required && inputCat != 'resource-object'}
				
			{/if}
			<slot name="actions" />
		</div>
		{#if !compact || (error && error != '')}
			<div class="text-right text-xs text-red-600">
				{#if error === ''}
					 
				{:else}
					{error}
				{/if}
			</div>
		{:else if !noMargin}
			<div class="mb-2" />
		{/if}
	</div>
</div>