{#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={$me.state === 'notValidated'}
			>
				Submit
			</button>
		</form>
	{/if}
</div>