<script>
	export let data;
	let filter = '';

	$: filter = filter.toUpperCase();
	$: selection = data.clinics.filter(row => row.active);
	$: {
		fetch('/api/config/user/clinics', { method: 'PUT', headers: { 'Content-type': 'application/json' }, body: JSON.stringify(selection.map(row => row.name)) });
	}
</script>

<svelte:head>
	<title>Clinics</title>
</svelte:head>

<h1>Clinics</h1>
<div class="card">
	<div class="input-group">
		<span class="input-group-text">🔎</span>
		<input type="text" class="form-control" placeholder="Clinic" bind:value={filter} />
	</div>
	{#if filter.length > 0}
		<ul class="list-group list-group-flush">
			{#each data.clinics as row}{#if (row.name.charAt(0) != 'Z') && (row.name != 'DELETED CLINIC') && (row.name != 'CLINIC DELETED') && (row.name.startsWith(filter))}<li class="list-group-item" class:active={row.active} on:click={evt => row.active = !row.active}>{row.name}</li>{/if}{/each}
		</ul>
	{/if}
	{#if selection.length > 0}
		<div class="card-footer">
			{#each selection as row}<span class="badge text-bg-primary">{row.name} <span on:click={evt => data.clinics[row.name].active = false}>❌</span></span>{/each}
		</div>
	{/if}
</div>

<style>
	.list-group {
		max-height: 50vh;
		overflow-y: auto;
	}
	.list-group-item {
		cursor: default;
	}
	.card-footer .badge:not(:last-child) {
		margin-right: 0.25em;
	}
</style>
