{#snippet children({ id })}

{/snippet}
	</Field>

<Field label="Pronouns" labelCase="normal">
		{#snippet children({ id })}
			<Input {id} placeholder="they/them" bind:value={pronouns} />
		{/snippet}
	</Field>

<Field label="Location" labelCase="normal">
		{#snippet children({ id })}
			<Input {id} iconLeft={MapPin} bind:value={location} />
		{/snippet}
	</Field>

<div class="flex flex-col gap-2xs">
		<span>Social links</span>
		<Checkbox class="py-2xs" bind:checked={bluesky}>Link to Bluesky account</Checkbox>
		{#each links as link, index (index)}
			<Input
				iconLeft={Link}
				placeholder={`Social link ${index + 1}`}
				bind:value={link.value}
			/>
		{/each}
	</div>

{#if save.error}
		<p class="typography-paragraph-small text-foreground-danger">{save.error}</p>
	{/if}

<div class="flex items-center justify-between gap-xs">
		<Button
			insetShadow={true}
			variant="default"
			class="w-full gap-xs"
			disabled={save.loading}
			onclick={onCancel}
			icon={X}
		>
			Cancel
		</Button>
		<Button
			insetShadow={true}
			type="submit"
			variant="default"
			class="w-full gap-xs"
			loading={save.loading}
			icon={Check}
		>
			Save
		</Button>
	</div>
</form>