<script lang="ts">
	import Table from '$lib/client/components/table.svelte';
	import ChartMotion from '$lib/client/components/ChartMotion.svelte';
	import ChartPower from '$lib/client/components/ChartPower.svelte';
	import ChartVoltage from '$lib/client/components/ChartVoltage.svelte';
	import {
		IconBuildingOffice2,
		IconBulb,
		IconCpuChip,
		IconUsers
	} from '$lib/client/components/icons';
</script>

<section class="mx-auto max-w-6xl space-y-4 lg:space-y-8">
	<!-- Pinned projects -->
	<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">
					<IconCpuChip />
				</span>
				<div class="text-sm font-medium leading-6 text-gray-900">Devices</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>
				<a href="/fault" class="flex justify-between gap-x-4 py-3 group">
					<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 group-hover:underline">Faulty</span>
					</dt>
					<dd class="text-gray-700"><time datetime="2022-12-13">12</time></dd>
				</a>
				<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>
		</li>
		<li>
			<a href="/map" class="block">
				<div class="flex items-center gap-2 bg-gray-50 p-5">
					<span class="text-gray-800">
						<IconBuildingOffice2 />
					</span>

					<div class="text-sm font-medium leading-6 text-gray-900">Zones</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-gray-400"></span>
							<span class="text-gray-500">Off</span>
						</dt>
						<dd class="text-gray-700"><time datetime="2022-12-13">0</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">12</time></dd>
					</div>
				</dl>
			</a>
		</li>
		<li>
			<div class="flex items-center gap-2 bg-gray-50 p-5">
				<span class="text-gray-800">
					<IconUsers />
				</span>
				<div class="text-sm font-medium leading-6 text-gray-900">Guests detected</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="text-gray-500">Now</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">Max Today</dt>
					<dd class="text-gray-700"><time datetime="2022-12-13">120</time></dd>
				</div>
				<div class="flex justify-between gap-x-4 py-3">
					<dt class="text-gray-500">30-Day Daily Average</dt>
					<dd class="text-gray-700"><time datetime="2022-12-13">70</time></dd>
				</div>
			</dl>
		</li>
	</ul>

	<!--Map-->
	<div class="h-96 relative overflow-hidden rounded-primary border border-gray-200 bg-white">
		<img class="brightness-85" src="../img/map.png" width="2414" height="2008" alt="Map example" />
		<ul>
			<li class="absolute top-[30%] left-[53%] cursor-pointer">
				<span
					class="relative size-6 flex items-center justify-center text-white bg-green-600 rounded-full"
				>
					<IconBulb class="size-4" />
					<span
						class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"
					></span>
				</span>
			</li>
			<li class="absolute top-[35%] left-[61.2%] cursor-pointer">
				<span
					class="relative size-6 flex items-center justify-center text-white bg-red-600 rounded-full"
				>
					<IconBulb class="size-4" />
					<span
						class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"
					></span>
				</span>
			</li>
		</ul>
	</div>

	<ul
			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>
			<ChartMotion />
		</li>
		<li>
			<ChartPower />
		</li>
		<li>
			<ChartVoltage />
		</li>
	</ul>

	<Table />
</section>
