<script lang="ts">
	import Badge from '$lib/client/components/badgeStatus.svelte';
	export let title = 'Faulty devices';
	export let description =
		'Lamp is not working / too much voltage / no signal from device for a long time.';
	export let link = '#';
	export let addLink = '';
	export let deleteLink = '';
</script>

<!-- Activity table (small breakpoint and up) -->
<div class="sm:flex sm:items-center">
	<div class="sm:flex-auto">
		<h1 class="text-base font-semibold leading-6 text-gray-900">{title}</h1>
		<p class="mt-2 text-sm text-gray-700">{description}</p>
	</div>
	{#if addLink}
		<div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
			<a
				href={addLink}
				class="flex gap-1 items-center rounded-primary bg-indigo-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
			>
				<svg
					xmlns="http://www.w3.org/2000/svg"
					class="h-6 w-6"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
					stroke-width="2"
				>
					<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
				</svg>
				Add
			</a>
		</div>

		{deleteLink}
	{/if}
</div>
<div class="flex flex-col">
	<div class="min-w-full overflow-hidden overflow-x-auto align-middle shadow sm:rounded-primary">
		<table class="min-w-full divide-y divide-gray-200">
			<thead>
				<tr
					class="*:whitespace-nowrap *:bg-gray-50 *:px-6 *:py-3 text-sm font-medium text-gray-900"
				>
					<th class="text-left" scope="col">#</th>
					<th class="text-left" scope="col">Location</th>
					<th class="text-left" scope="col">Status</th>
					<th class="text-right" scope="col">Last Updated</th>
				</tr>
			</thead>
			<tbody class="divide-y divide-gray-200 bg-white">
				{#each { length: 1 } as item, index}
					<tr class="bg-white text-sm *:px-6 *:py-4">
						<td class="text-gray-900">
							#{index}
						</td>
						<td>Block 1</td>
						<td>
							<Badge text="Working" color="green" />
						</td>
						<td class="whitespace-nowrap px-6 py-4 text-right text-sm text-gray-500">
							<time datetime="2020-07-11">July 11, 2024</time>
						</td>
					</tr>
					<tr class="bg-white text-sm *:px-6 *:py-4">
						<td class="text-gray-900">
							#{index + 1}
						</td>
						<td>Block 2</td>
						<td>
							<Badge text="Not Working" color="red" />
						</td>
						<td class="whitespace-nowrap px-6 py-4 text-right text-sm text-gray-500">
							<time datetime="2020-07-11">July 11, 2024</time>
						</td>
					</tr>
					<tr class="bg-white text-sm *:px-6 *:py-4">
						<td class="text-gray-900">
							#{index + 2}
						</td>
						<td>Block 3</td>
						<td>
							<Badge text="Too much voltage" color="orange" />
						</td>
						<td class="whitespace-nowrap px-6 py-4 text-right text-sm text-gray-500">
							<time datetime="2020-07-11">July 11, 2024</time>
						</td>
					</tr>
					<tr class="bg-white text-sm *:px-6 *:py-4">
						<td class="text-gray-900">
							#{index + 3}
						</td>
						<td>Block 4</td>
						<td>
							<Badge text="No signal" color="gray" />
						</td>
						<td class="whitespace-nowrap px-6 py-4 text-right text-sm text-gray-500">
							<time datetime="2020-07-11">July 11, 2024</time>
						</td>
					</tr>
				{/each}
				<!-- More transactions... -->
			</tbody>
		</table>
		<!-- Pagination -->
		<nav
			class="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6"
			aria-label="Pagination"
		>
			<div class="hidden sm:block">
				<p class="text-sm text-gray-700">
					Showing
					<span class="font-medium">1</span>
					to
					<span class="font-medium">10</span>
					of
					<span class="font-medium">20</span>
					results
				</p>
			</div>
			<div class="flex flex-1 justify-between gap-x-3 sm:justify-end">
				<a
					href={link}
					class="relative inline-flex items-center rounded-primary bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:ring-gray-400"
					>Previous</a
				>
				<a
					href={link}
					class="relative inline-flex items-center rounded-primary bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:ring-gray-400"
					>Next</a
				>
			</div>
		</nav>
	</div>
</div>
