<script>
	import {IconInformationCircle} from "$lib/client/components/icons/";
</script>

<section class="mx-auto max-w-6xl space-y-4 lg:space-y-8">
	<ul
			role="list"
			class="grid grid-cols-1 gap-x-6 gap-y-8 md:grid-cols-3 xl:gap-x-8
	*:overflow-hidden *:rounded-primary *:border *:border-gray-200 *:bg-white"
	>
		<li>
			<div class="flex items-center gap-2 bg-gray-50 p-5">
				<span class="text-gray-800">
					<IconInformationCircle />
				</span>
				<div class="text-sm font-medium leading-6 text-gray-900">Lamps</div>
			</div>
			<dl class="divide-y divide-gray-100 px-6 py-px text-sm leading-6">
				<div class="flex justify-between gap-x-4 py-3">
					<dt class="flex items-center gap-x-2">
						<span class="h-2 w-2 rounded-full bg-green-600"></span>
						<span class="text-gray-500">On</span>
					</dt>
					<dd class="text-gray-700"><time datetime="2022-12-13">23</time></dd>
				</div>
				<div class="flex justify-between gap-x-4 py-3">
					<dt class="flex items-center gap-x-2">
						<span class="h-2 w-2 rounded-full bg-red-600"></span>
						<span class="text-gray-500">Faulty</span>
					</dt>
					<dd class="text-gray-700"><time datetime="2022-12-13">12</time></dd>
				</div>
				<div class="flex justify-between gap-x-4 py-3">
					<dt class="text-gray-500">Total</dt>
					<dd class="text-gray-700"><time datetime="2022-12-13">35</time></dd>
				</div>
			</dl>
		</li>
		<li>
			<a href="/map" class="block">
				<div class="flex items-center gap-2 bg-gray-50 p-5">
					<span class="text-gray-800">
						<IconInformationCircle />
					</span>

					<div class="text-sm font-medium leading-6 text-gray-900">Gateways</div>
				</div>
				<dl class="divide-y divide-gray-100 px-6 py-px text-sm leading-6">
					<div class="flex justify-between gap-x-4 py-3">
						<dt class="flex items-center gap-x-2">
							<span class="h-2 w-2 rounded-full bg-green-600"></span>
							<span class="text-gray-500">On</span>
						</dt>
						<dd class="text-gray-700"><time datetime="2022-12-13">123</time></dd>
					</div>
					<div class="flex justify-between gap-x-4 py-3">
						<dt class="flex items-center gap-x-2">
							<span class="h-2 w-2 rounded-full bg-red-600"></span>
							<span class="text-gray-500">Faulty</span>
						</dt>
						<dd class="text-gray-700"><time datetime="2022-12-13">12</time></dd>
					</div>
					<div class="flex justify-between gap-x-4 py-3">
						<dt class="text-gray-500">Total</dt>
						<dd class="text-gray-700"><time datetime="2022-12-13">135</time></dd>
					</div>
				</dl>
			</a>
		</li>
		<li>
			<div class="flex items-center gap-2 bg-gray-50 p-5">
				<span class="text-gray-800">
					<IconInformationCircle />
				</span>
				<div class="text-sm font-medium leading-6 text-gray-900">Sensors</div>
			</div>
			<dl class="divide-y divide-gray-100 px-6 py-px text-sm leading-6">
				<div class="flex justify-between gap-x-4 py-3">
					<dt class="flex items-center gap-x-2">
						<span class="h-2 w-2 rounded-full bg-green-600"></span>
						<span class="text-gray-500">On</span>
					</dt>
					<dd class="text-gray-700"><time datetime="2022-12-13">12</time></dd>
				</div>
				<div class="flex justify-between gap-x-4 py-3">
					<dt class="flex items-center gap-x-2">
						<span class="h-2 w-2 rounded-full bg-red-600"></span>
						<span class="text-gray-500">Faulty</span>
					</dt>
					<dd class="text-gray-700"><time datetime="2022-12-13">2</time></dd>
				</div>
				<div class="flex justify-between gap-x-4 py-3">
					<dt class="text-gray-500">Total</dt>
					<dd class="text-gray-700"><time datetime="2022-12-13">14</time></dd>
				</div>
			</dl>
		</li>
	</ul>

	<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 max-w-xs" scope="col">Name</th>
					<th class="text-left" scope="col">Type</th>
					<th class="text-left" scope="col">Fault reason</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"> Lamp 001 </td>
						<td>Bulb</td>
						<td> Zero power consumed </td>
					</tr>
					<tr class="bg-white text-sm *:px-6 *:py-4">
						<td class="text-gray-900"> Gateway 001 </td>
						<td>A wi-fi router</td>
						<td> Offline </td>
					</tr>
					<tr class="bg-white text-sm *:px-6 *:py-4">
						<td class="text-gray-900"> Motion sensor 001 </td>
						<td>A sensor</td>
						<td> Too high measures </td>
					</tr>
				{/each}
				<!-- More transactions... -->
				</tbody>
			</table>
		</div>
	</div>
</section>
