{$i18n.t('Input Variables')}

{ submitHandler(); }} >

{#if !loading}

{#each Object.keys(variables) as variable, idx} {@const { type, ...variableAttributes } = variables[variable] ?? {}}

{variable} {#if variables[variable]?.required ?? false} *{$i18n.t('required')} {/if}

{#if variables[variable]?.type === 'select'} {@const options = variableAttributes?.options ?? []} {@const placeholder = variableAttributes?.placeholder ?? ''} {:else if variables[variable]?.type === 'checkbox'}

{variables[variable]?.label ?? variable}

{:else if variables[variable]?.type === 'color'}

{ // Convert the color value to uppercase immediately variableValues[variable] = e.target.value.toUpperCase(); }} {...variableAttributes} />

{:else if variables[variable]?.type === 'date'} {:else if variables[variable]?.type === 'datetime-local'} {:else if variables[variable]?.type === 'email'} {:else if variables[variable]?.type === 'month'} {:else if variables[variable]?.type === 'number'} {:else if variables[variable]?.type === 'range'}

{:else if variables[variable]?.type === 'tel'} {:else if variables[variable]?.type === 'text'} {:else if variables[variable]?.type === 'time'} {:else if variables[variable]?.type === 'url'} {:else if variables[variable]?.type === 'map'}

{ variableValues[variable] = value; }} />

{:else}

{/if}
											</div>
										</div>

</div>
								{/each}
							</div>
						{:else}
							<Spinner className="size-5" />
						{/if}
					</div>

<div class="flex justify-end pt-3 text-sm font-medium">
						<button
							class="px-3.5 py-1.5 text-sm font-medium bg-white hover:bg-gray-100 text-black dark:bg-black dark:text-white dark:hover:bg-gray-900 transition rounded-full"
							type="button"
							on:click={() => {
								show = false;
							}}
						>
							{$i18n.t('Cancel')}
						</button>