<script>
	import { tick } from 'svelte';
	import { page } from '$app/stores';
	export let data;

	let ref = null;

	$: tick().then(() => ref ? ref.focus() : null);
</script>

<svelte:head>
	<title>Lookup</title>
</svelte:head>

<h1>Lookup</h1>
<div class="card mb-3 shadow">
	<form method="get" action="?">
		<div class="input-group">
			<span class="input-group-text">🔎</span>
			<input type="text" class="form-control" placeholder="Lookup" name="q" bind:value={data.query} bind:this={ref} />
			<button type="submit" class="btn btn-primary">Search</button>
		</div>
	</form>
	{#if data.items.length > 0}
		<table class="table" data-sveltekit-preload-data="tap">
			<thead>
				<tr>
					<th scope="col">Name</th>
					<th scope="col">DOB</th>
					<th scope="col">SSN</th>
					<th scope="col"></th>
					<th scope="col">Type</th>
					<th scope="col"></th>
				</tr>
			</thead>
			<tbody>
				{#each data.items as row}
					<tr>
						<td><a href="/lookup?q={data.query}&ordinal={row.ordinal || 0}&rd=true">{row.name}{#if row.alias}{' (' + row.alias + ')'}{/if}</a></td>
						<td>{row.dob}</td>
						<td>{row.ssn}</td>
						<td>{row.yesno}</td>
						<td>{row.type}</td>
						<td>{row.no}</td>
					</tr>
				{/each}
			</tbody>
		</table>
		{#if (data.items.length) == 1 && (data.detail)}
			<div class="card-body">
				<pre class="card-text">{data.detail}</pre>
				<p class="card-text"><a class="btn btn-danger" href="/lookup?q={data.query}&ordinal={data.items[0].ordinal || 0}&rd=true&force=true">Proceed to {data.items[0].name}</a></p>
			</div>
		{/if}
	{/if}
</div>

<style>
	.card table.table {
		margin-bottom: 0;
	}
</style>
