Input

<script lang="ts">
	import Input from '#lib/ui/Input.svelte';
</script>

<Input label="Title of the work" placeholder="Kitab al-Manazir" />

<script lang="ts">
	import Input from '#lib/ui/Input.svelte';
</script>

<Input
	label="Full name"
	placeholder="Abu Ali al-Husayn ibn Sina"
	autocomplete="name"
	hint="As it appears in the House of Wisdom register."
/>

<script lang="ts">
	import Input from '#lib/ui/Input.svelte';

	let email = $state('khwarizmi@');
	const error = $derived(
		/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email)
			? undefined
			: 'Enter an email like khwarizmi@baytalhikma.org.'
	);
</script>

<Input label="Email" type="email" autocomplete="email" bind:value={email} {error} />

<script lang="ts">
	import Input from '#lib/ui/Input.svelte';
</script>

<Input label="Library" value="Bayt al-Hikma, Baghdad" disabled />

<script lang="ts">
	import Input from '#lib/ui/Input.svelte';
</script>

<Input label="Library website" placeholder="bayt-al-hikma">
	{#snippet start()}https://{/snippet}
	{#snippet end()}.org{/snippet}
</Input>

<script lang="ts">
	import { Copy01Icon, Tick02Icon } from '@hugeicons/core-free-icons';
	import Input from '#lib/ui/Input.svelte';
	import InputButton from '#lib/ui/InputButton.svelte';
	import { announce } from '#lib/ui/announce.js';

	const link = 'https://bayt-al-hikma.org/manuscripts/optics-1021';
	let copied = $state(false);

	async function copy() {
		await navigator.clipboard.writeText(link);
		copied = true;
		announce('Link copied');
		setTimeout(() => (copied = false), 1600);
	}
</script>

<Input label="Share link" value={link} readonly onfocus={(e) => e.currentTarget.select()}>
	{#snippet end()}
		<InputButton icon={copied ? Tick02Icon : Copy01Icon} aria-label="Copy link" onclick={copy} />
	{/snippet}
</Input>

<script lang="ts">
	import InlineEdit from '#lib/ui/InlineEdit.svelte';

	let title = $state('Kitab al-Manazir (Book of Optics)');
</script>

<div class="demo">
	<InlineEdit label="Title" bind:value={title} required maxlength={80} />
</div>

<style>
	.demo {
		inline-size: min(24rem, 100%);
	}
</style>

<script lang="ts">
	import InlineEdit from '#lib/ui/InlineEdit.svelte';

	let name = $state('Maryam al-Asturlabi');
	let email = $state('maryam@bayt-al-hikma.org');
	let city = $state('Aleppo');
	let note = $state('');
	let tries = 0;

	// Stand-ins for your API. The city save fails the first time, to show what happens.
	const wait = () => new Promise((r) => setTimeout(r, 600));
	const saveCity = async () => {
		await wait();
		if (tries++ === 0) throw new Error('offline');
	};
</script>

<dl class="profile">
	<div>
		<dt class="sr">Name</dt>
		<dd><InlineEdit label="Name" bind:value={name} required onsave={wait} /></dd>
	</div>
	<div>
		<dt class="sr">Email</dt>
		<dd>
			<InlineEdit
				label="Email"
				type="email"
				bind:value={email}
				required
				validate={(v) =>
					/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v)
						? undefined
						: 'Enter an email like name@example.com.'}
				onsave={wait}
			/>
		</dd>
	</div>
	<div>
		<dt class="sr">City</dt>
		<dd><InlineEdit label="City" bind:value={city} onsave={saveCity} /></dd>
	</div>
	<div>
		<dt class="sr">Note</dt>
		<dd><InlineEdit label="Note" bind:value={note} placeholder="Add a note" onsave={wait} /></dd>
	</div>
</dl>

<style>
	.profile {
		display: grid;
		gap: 0.75rem;
		inline-size: min(24rem, 100%);
		margin: 0;
	}
	dd {
		margin: 0;
	}
	.sr {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}
</style>