<!DOCTYPE html>
<html lang="en" class="[scrollbar-gutter:stable]">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="csrf-token" content={get_csrf_token()} />
    <.live_title suffix={" · #{app_name()}"}>
      <%= assigns[:page_title] || "Performance Monitor" %>
    </.live_title>
    <script src="https://cdn.tailwindcss.com">
    </script>
    <script
      defer
      phx-track-static
      type="text/javascript"
      src={~p"/assets/app.js"}
    >
    </script>
  </head>
  <body class="bg-gray-50 antialiased">
    <nav class="bg-white shadow-sm border-b border-gray-200">
      <div class="container mx-auto px-6 py-4">
        <div class="flex items-center justify-between">
          <div class="flex items-center space-x-8">
            <a href="/" class="text-xl font-bold text-gray-900">
              <%= app_name() %>
            </a>
            <div class="hidden md:flex space-x-4">
              <a
                href="/dev/performance/endpoints"
                class="text-gray-600 hover:text-gray-900 transition"
              >
                Endpoints
              </a>
              <a
                href="/dev/performance/queries"
                class="text-gray-600 hover:text-gray-900 transition"
              >
                Queries
              </a>
              <a href="/dev/dashboard" class="text-gray-600 hover:text-gray-900 transition">
                LiveDashboard
              </a>
            </div>
          </div>
        </div>
      </div>
    </nav>
    <%= @inner_content %>
  </body>
</html>
