<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>{% block title %}Jax Gateway{% endblock %}</title>

    <!-- Inter font -->
    <link rel="preconnect" href="https://rsms.me/" />
    <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />

    <style>
      :root {
        font-family: Inter, sans-serif;
        font-feature-settings: "liga" 1, "calt" 1;
      }
      @supports (font-variation-settings: normal) {
        :root {
          font-family: InterVariable, sans-serif;
        }
      }
    </style>

    <!-- Franken UI -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/franken-ui@next/dist/css/core.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/franken-ui@next/dist/css/utilities.min.css" />

    <script>
      const htmlElement = document.documentElement;
      const __FRANKEN__ = JSON.parse(localStorage.getItem("__FRANKEN__") || "{}");

      if (__FRANKEN__.mode === "dark" || (!__FRANKEN__.mode && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
        htmlElement.classList.add("dark");
      } else {
        htmlElement.classList.remove("dark");
      }

      if (__FRANKEN__.theme) {
        htmlElement.classList.add(__FRANKEN__.theme);
      }
      htmlElement.classList.add(__FRANKEN__.radii || "uk-radii-md");
      htmlElement.classList.add(__FRANKEN__.shadows || "uk-shadows-sm");
      htmlElement.classList.add(__FRANKEN__.font || "uk-font-sm");
      htmlElement.classList.add(__FRANKEN__.chart || "uk-chart-default");
    </script>

    <script type="module" src="https://cdn.jsdelivr.net/npm/franken-ui@next/dist/js/core.iife.js"></script>

    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">

    <!-- Custom styles -->
    <link rel="stylesheet" href="/static/style.css">

    {% block head %}{% endblock %}
</head>
<body class="bg-background text-foreground flex flex-col min-h-screen">
    <nav class="border-b bg-background">
        <div class="px-8 py-4 flex items-center justify-between">
            <a href="/" class="flex items-center gap-2 text-primary font-bold text-xl text-decoration-none">
                <i class="fas fa-database"></i>
                <span>jax</span>
            </a>
        </div>
    </nav>

    <main class="flex-1">
        {% block content %}{% endblock %}
    </main>

    <script type="module" src="https://cdn.jsdelivr.net/npm/franken-ui@next/dist/js/icon.iife.js"></script>
    <script src="/static/app.js"></script>
</body>
</html>
