<script lang="ts">
  import SystemMonitorCardLocal from "$lib/components/ti/SystemMonitorCardLocal.svelte";
</script>

<div class="container mx-auto px-4 py-6 max-w-7xl">
  <!-- Header -->
  <div class="flex items-center justify-between mb-8">
    <div class="flex items-center gap-4">
      <div class="p-3 bg-gradient-to-br from-primary/20 to-primary/10 rounded-2xl">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-primary" 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-4xl font-bold text-primary">Monitoramento SGSE</h1>
        <p class="text-base-content/60 mt-2 text-lg">Sistema de monitoramento técnico em tempo real</p>
      </div>
    </div>
    <a href="/ti" class="btn btn-ghost">
      <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>

