<script lang="ts">
	import { resolve } from '$app/paths';
	import SystemMonitorCardLocal from '$lib/components/ti/SystemMonitorCardLocal.svelte';
</script>

<div class="container mx-auto max-w-7xl px-4 py-6">
	<!-- Header -->
	<div class="mb-8 flex items-center justify-between">
		<div class="flex items-center gap-4">
			<div class="from-primary/20 to-primary/10 rounded-2xl bg-linear-to-br p-3">
				<svg
					xmlns="http://www.w3.org/2000/svg"
					class="text-primary h-10 w-10"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"
					/>
				</svg>
			</div>
			<div>
				<h1 class="text-primary text-4xl font-bold">Monitoramento SGSE - Sistema de Gerenciamento de Secretaria</h1>
				<p class="text-base-content/60 mt-2 text-lg">
					Sistema de monitoramento técnico em tempo real
				</p>
			</div>
		</div>
		<a href={resolve('/ti')} class="btn">
			<svg
				xmlns="http://www.w3.org/2000/svg"
				class="h-5 w-5"
				fill="none"
				viewBox="0 0 24 24"
				stroke="currentColor"
			>
				<path
					stroke-linecap="round"
					stroke-linejoin="round"
					stroke-width="2"
					d="M10 19l-7-7m0 0l7-7m-7 7h18"
				/>
			</svg>
			Voltar
		</a>
	</div>

	<!-- Card de Monitoramento -->
	<SystemMonitorCardLocal />
</div>
