<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{% block title %}Observatory{% endblock %} — Protean Observatory</title>

  <!-- Vendored: DaisyUI 5 + Tailwind CSS 4 -->
  <link rel="stylesheet" href="/static/vendor/daisyui.css">
  <link rel="stylesheet" href="/static/vendor/daisyui-themes.css">
  <script src="/static/vendor/tailwindcss-browser.js"></script>

  <!-- Vendored: D3.js v7 -->
  <script src="/static/vendor/d3.v7.min.js"></script>

  <!-- Observatory custom styles -->
  <link rel="stylesheet" href="/static/css/observatory.css">

  <!-- Observatory core JS -->
  <script src="/static/js/core.js" defer></script>
  <script src="/static/js/charts.js" defer></script>
  {% block head %}{% endblock %}
</head>
<body class="bg-base-200 min-h-screen">

  <!-- Layout: sidebar + main content -->
  <div class="drawer lg:drawer-open">
    <input id="nav-drawer" type="checkbox" class="drawer-toggle" />

    <!-- Main content area -->
    <div class="drawer-content flex flex-col">

      <!-- Top header bar -->
      <header class="navbar bg-base-100 border-b border-base-300 sticky top-0 z-30 px-4">
        <!-- Mobile menu button -->
        <div class="flex-none lg:hidden">
          <label for="nav-drawer" class="btn btn-square btn-ghost">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-5 h-5 stroke-current">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
            </svg>
          </label>
        </div>

        <!-- SSE connection status -->
        <div class="flex-1 flex items-center gap-3">
          <span id="sse-status" class="badge badge-sm badge-ghost">
            <span class="status status-xs" id="sse-dot"></span>
          </span>
        </div>

        <!-- Header controls -->
        <div class="flex-none flex items-center gap-2">
          <!-- Time window selector -->
          <div class="join" id="window-selector">
            {% for w in ["5m", "15m", "1h", "24h", "7d"] %}
            <button class="join-item btn btn-xs {% if w == '5m' %}btn-primary{% else %}btn-ghost{% endif %}"
                    data-window="{{ w }}"
                    onclick="Observatory.setWindow('{{ w }}')">{{ w }}</button>
            {% endfor %}
          </div>

          <!-- Pause/Resume -->
          <button class="btn btn-xs btn-ghost" id="btn-pause" onclick="Observatory.togglePause()" title="Pause/Resume">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4" id="pause-icon">
              <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25v13.5m-7.5-13.5v13.5" />
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 hidden" id="play-icon">
              <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z" />
            </svg>
          </button>

          <!-- Theme toggle -->
          <label class="swap swap-rotate btn btn-xs btn-ghost">
            <input type="checkbox" id="theme-toggle" onchange="Observatory.toggleTheme()" />
            <!-- Sun icon -->
            <svg class="swap-off fill-current w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              <path d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"/>
            </svg>
            <!-- Moon icon -->
            <svg class="swap-on fill-current w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              <path d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"/>
            </svg>
          </label>
        </div>
      </header>

      <!-- Loading progress bar -->
      <div id="loading-bar"></div>

      <!-- Page content -->
      <main class="flex-1 p-4 lg:p-6">
        {% block content %}{% endblock %}
      </main>
    </div>

    <!-- Sidebar navigation -->
    <div class="drawer-side z-40">
      <label for="nav-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
      <aside class="bg-base-100 border-r border-base-300 w-64 min-h-screen flex flex-col">
        <!-- Logo -->
        <div class="px-4 py-5 border-b border-base-300">
          <a href="/" class="flex items-center gap-2">
            <span class="text-xl">🔭</span>
            <div>
              <div class="font-bold text-lg tracking-tight">Observatory</div>
              <div class="text-xs text-base-content/50">Protean Monitoring</div>
            </div>
          </a>
        </div>

        <!-- Navigation -->
        <nav class="flex-1 px-3 py-4">
          <ul class="menu menu-sm gap-1">
            <li>
              <a href="/" class="{% if active_page == 'overview' %}active{% endif %}">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25a2.25 2.25 0 0 1-2.25-2.25v-2.25Z" />
                </svg>
                Overview
                <span class="badge badge-xs" id="nav-health-dot"></span>
              </a>
            </li>
            <li>
              <a href="/handlers" class="{% if active_page == 'handlers' %}active{% endif %}">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0ZM3.75 12h.007v.008H3.75V12Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm-.375 5.25h.007v.008H3.75v-.008Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
                </svg>
                Handlers
              </a>
            </li>
            <li>
              <a href="/processes" class="{% if active_page == 'processes' %}active{% endif %}">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12c0-1.232-.046-2.453-.138-3.662a4.006 4.006 0 0 0-3.7-3.7 48.678 48.678 0 0 0-7.324 0 4.006 4.006 0 0 0-3.7 3.7c-.017.22-.032.441-.046.662M19.5 12l3-3m-3 3-3-3m-12 3c0 1.232.046 2.453.138 3.662a4.006 4.006 0 0 0 3.7 3.7 48.656 48.656 0 0 0 7.324 0 4.006 4.006 0 0 0 3.7-3.7c.017-.22.032-.441.046-.662M4.5 12l3 3m-3-3-3 3" />
                </svg>
                Processes
              </a>
            </li>
            <li>
              <a href="/eventstore" class="{% if active_page == 'eventstore' %}active{% endif %}">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125" />
                </svg>
                Event Store
              </a>
            </li>
            <li>
              <a href="/messages" class="{% if active_page == 'messages' %}active{% endif %}">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
                </svg>
                Messages
                <span class="badge badge-xs badge-error" id="nav-messages-badge" style="display:none"></span>
              </a>
            </li>
            <li>
              <a href="/infrastructure" class="{% if active_page == 'infrastructure' %}active{% endif %}">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 14.25h13.5m-13.5 0a3 3 0 0 1-3-3m3 3a3 3 0 1 0 0 6h13.5a3 3 0 1 0 0-6m-16.5-3a3 3 0 0 1 3-3h13.5a3 3 0 0 1 3 3m-19.5 0a4.5 4.5 0 0 1 .9-2.7L5.737 5.1a3.375 3.375 0 0 1 2.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 0 1 .9 2.7m0 0a3 3 0 0 1-3 3m0 3h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Zm-3 6h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Z" />
                </svg>
                Infrastructure
              </a>
            </li>
          </ul>
        </nav>

        <!-- Footer -->
        <div class="px-4 py-3 border-t border-base-300 text-xs text-base-content/40 flex items-center justify-between">
          <span>Protean Observatory</span>
          <button class="btn btn-xs btn-ghost" onclick="document.getElementById('shortcuts-modal').showModal()" title="Keyboard shortcuts (?)">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-3.5 h-3.5">
              <path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" />
            </svg>
          </button>
        </div>
      </aside>
    </div>
  </div>

  <!-- Keyboard Shortcuts Modal -->
  <dialog id="shortcuts-modal" class="modal">
    <div class="modal-box max-w-md">
      <h3 class="font-bold text-lg mb-4">Keyboard Shortcuts</h3>
      <div class="overflow-x-auto">
        <table class="table table-sm">
          <thead><tr><th>Keys</th><th>Action</th></tr></thead>
          <tbody>
            <tr><td><kbd class="kbd kbd-sm">g</kbd> then <kbd class="kbd kbd-sm">o</kbd></td><td>Go to Overview</td></tr>
            <tr><td><kbd class="kbd kbd-sm">g</kbd> then <kbd class="kbd kbd-sm">h</kbd></td><td>Go to Handlers</td></tr>
            <tr><td><kbd class="kbd kbd-sm">g</kbd> then <kbd class="kbd kbd-sm">p</kbd></td><td>Go to Processes</td></tr>
            <tr><td><kbd class="kbd kbd-sm">g</kbd> then <kbd class="kbd kbd-sm">e</kbd></td><td>Go to Event Store</td></tr>
            <tr><td><kbd class="kbd kbd-sm">g</kbd> then <kbd class="kbd kbd-sm">i</kbd></td><td>Go to Infrastructure</td></tr>
            <tr><td><kbd class="kbd kbd-sm">g</kbd> then <kbd class="kbd kbd-sm">m</kbd></td><td>Go to Messages</td></tr>
            <tr><td><kbd class="kbd kbd-sm">/</kbd></td><td>Focus search</td></tr>
            <tr><td><kbd class="kbd kbd-sm">r</kbd></td><td>Refresh data</td></tr>
            <tr><td><kbd class="kbd kbd-sm">?</kbd></td><td>Toggle this help</td></tr>
            <tr><td><kbd class="kbd kbd-sm">Esc</kbd></td><td>Close panel / modal</td></tr>
          </tbody>
        </table>
      </div>
      <div class="modal-action">
        <form method="dialog"><button class="btn btn-sm">Close</button></form>
      </div>
    </div>
    <form method="dialog" class="modal-backdrop"><button>close</button></form>
  </dialog>

  {% block scripts %}{% endblock %}
</body>
</html>
