{#if $successMessage} {:else}

{#each fields as field}

{#if $errors[field]} {$errors[field]} {:else} {field.charAt(0).toUpperCase() + field.slice(1)} {/if} {#if field === 'about'}

{:else if field === 'favoriteFood'}
							<select
								name={field}
								class="w-full px-3 py-2 bg-transparent border-gray-100 rounded-md border-1 ring-0 ring-white focus:outline-none focus:ring-2 focus:ring-blue-500"
								bind:value={$form[field]}
								aria-invalid={$errors[field] ? 'true' : undefined}
								{...constraints[field]}
							>
								<option value="">Select...</option>
								<option value="apple">Apple</option>
								<option value="banana">Banana</option>
								<option value="coconut">Coconut</option>
								<option value="strawberry">Strawberry</option>
								<option value="mango">Mango</option>
							</select>
						{:else if field === 'age'}
							<input
								name={field}
								type="number"
								class="w-full px-3 py-2 bg-transparent border-gray-100 rounded-md border-1 ring-0 ring-white focus:outline-none focus:ring-2 focus:ring-blue-500"
								bind:value={$form[field]}
								aria-invalid={$errors[field] ? 'true' : undefined}
								{...constraints[field]}
							/>
						{:else if field === 'slider'}
							<RangeSlider name={field} bind:value={$form[field]} min={0} max={100} step={1} ticked>
								<div class="flex items-center justify-between">
									<div class="text-xs">{$form[field]} / 100</div>
								</div>
							</RangeSlider>
						{:else if field === 'toggle'}
							<SlideToggle name={field} bind:checked={$form[field]} />
						{:else}
							<input
								name={field}
								type="text"
								class="w-full px-3 py-2 bg-transparent border-gray-100 rounded-md border-1 ring-0 ring-white focus:outline-none focus:ring-2 focus:ring-blue-500"
								bind:value={$form[field]}
								aria-invalid={$errors[field] ? 'true' : undefined}
								{...constraints[field]}
							/>
						{/if}
					</div>
				{/each}
				<button
					type="submit"
					class="w-full px-4 py-2 mt-4 text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
					disabled={!$store.isValidated}
				>
					Submit
				</button>
			</form>
		{/if}
	</div>
{/if}