<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, interactive-widget=resizes-content">
<title>Repowire — Dashboard</title>
<link rel="icon" href="/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
  theme: {
    extend: {
      fontFamily: { mono: ['ui-monospace', 'SFMono-Regular', 'Menlo', 'monospace'] },
    }
  }
}
</script>
<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.0-beta.11/bundles/datastar.js"></script>
<style>
  *, *::before, *::after { box-sizing: border-box; }
  body { margin: 0; }
  .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
</style>
</head>
<body class="h-dvh bg-zinc-950 text-zinc-400 font-sans flex flex-col overflow-hidden"
      data-signals='{"mobileMenu": false, "composeMode": "notify", "composeText": ""}'>

  <!-- Header -->
  <header class="flex items-center justify-between px-3 sm:px-6 py-3 border-b border-zinc-800 shrink-0">
    <div class="flex items-center gap-2 sm:gap-3">
      <button class="md:hidden p-1.5 hover:bg-zinc-800 rounded-md transition-colors"
              data-on-click="$mobileMenu = !$mobileMenu">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
        </svg>
      </button>
      <a href="/dashboard" class="flex items-center gap-2 sm:gap-3 hover:opacity-80 transition-opacity">
        <img src="/logo-dark.webp" alt="Repowire" class="w-7 h-7 rounded-lg">
        <span class="text-white font-bold tracking-tight text-lg hidden sm:inline">REPOWIRE</span>
      </a>
    </div>
    <div class="flex items-center gap-2 sm:gap-4">
      <div id="connection-status" class="flex items-center gap-1.5 sm:gap-2 px-2 sm:px-3 py-1 rounded-full text-xs font-medium text-emerald-500">
        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.14 0M1.394 9.393c5.857-5.858 15.355-5.858 21.213 0"/></svg>
        <span class="hidden sm:inline">Connected</span>
        <span class="text-zinc-600">·</span>
        <span id="online-count" class="tabular-nums">{{ online_count }} online</span>
      </div>
    </div>
  </header>

  <!-- Body -->
  <div class="flex flex-1 overflow-hidden relative">

    <!-- Mobile sidebar overlay -->
    <div data-show="$mobileMenu" class="absolute inset-0 z-30 md:hidden flex">
      <aside id="mobile-sidebar" class="w-64 bg-zinc-950 border-r border-zinc-800 flex flex-col overflow-y-auto shrink-0">
        {{ sidebar_html }}
      </aside>
      <div class="flex-1 bg-black/50" data-on-click="$mobileMenu = false"></div>
    </div>

    <!-- Desktop sidebar -->
    <aside id="sidebar" class="hidden md:flex w-56 border-r border-zinc-800 flex-col overflow-y-auto shrink-0">
      {{ sidebar_html }}
    </aside>

    <!-- Main content -->
    <main id="main-content" class="flex-1 flex flex-col overflow-hidden min-w-0"
          data-init="@get('/v2/sse', {retry: 'always', retryInterval: 2000})">
      {% if content_html %}
      {{ content_html }}
      {% else %}
      <div class="flex items-center justify-center h-full text-zinc-600 text-sm">
        Loading...
      </div>
      {% endif %}
    </main>
  </div>
</body>
</html>
