{#each Object.entries(components) as [key, component] (key)}
{@const label = component.title || component.label || key}
{#if component.type === 'select'}
{#if isPickerField(component.subType)}
updateConfig(key, value)}
/>
{:else}
{@const options = component.options?.map((opt) => {
return { label: opt.label, value: String(opt.value) };
}) || [{ label: 'N/A', value: '' }]}
{@const currentValue = actualConfig[key]}
{@const selectedItem = options.find((opt) => opt.value === String(currentValue)) ?? options[0]}
{/if}
{:else if component.type === 'multiselect'}
{#if isPickerField(component.subType)}
updateConfig(key, value)}
/>
{:else}
{@const options = component.options?.map((opt) => {
return { label: opt.label, value: String(opt.value) };
}) || [{ label: 'N/A', value: '' }]}
{@const currentValues = (actualConfig[key] as string[]) ?? []}
{@const selectedItems = options.filter((opt) => currentValues.includes(opt.value))}
updateConfig(
key,
opt.map((o) => o.value),
)}
values={selectedItems}
/>
{/if}
{:else if component.type === 'switch'}
{@const checked = Boolean(actualConfig[key])}
updateConfig(key, check)} />
{:else if isPickerField(component.subType)}
updateConfig(key, value)}
/>
{:else}
updateConfig(key, e.currentTarget.value)}
required={component.required}
/>
{/if}
{/each}