neiam /bismuth

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="icon" href="/assets/img/favicon.png"/>
    <link rel="stylesheet" href="/assets/css/app.css"/>
    <script defer src="/assets/js/app.js"></script>
    <title>{{ app_name }}{% if title %} :: {{ title }}{% endif %}</title>
    <style>body { font-family: "B612 Mono", monospace; }</style>
    <script>
      // Apply the saved (or system) theme before first paint to avoid a flash.
      (() => {
        const KEY = "app:theme";
        const SYSTEM_DARK = "dark";
        const SYSTEM_LIGHT = "light";
        const mq = window.matchMedia("(prefers-color-scheme: dark)");
        const systemTheme = () => (mq.matches ? SYSTEM_DARK : SYSTEM_LIGHT);
        window.appSetTheme = (theme) => {
          if (theme === "system") {
            localStorage.removeItem(KEY);
            document.documentElement.setAttribute("data-theme", systemTheme());
          } else {
            localStorage.setItem(KEY, theme);
            document.documentElement.setAttribute("data-theme", theme);
          }
        };
        if (!document.documentElement.hasAttribute("data-theme")) {
          window.appSetTheme(localStorage.getItem(KEY) || "system");
        }
        mq.addEventListener("change", () => {
          if (!localStorage.getItem(KEY)) window.appSetTheme("system");
        });
      })();
    </script>
</head>
<!-- hx-boost turns in-app navigation into AJAX swaps of #content, so the nav
     and page chrome persist and only the main region reloads. hx-select pulls
     just #content out of the full page each route returns. -->
<body hx-boost="true"
      hx-target="#content"
      hx-select="#content"
      hx-swap="outerHTML show:window:top"
      {% if user %}data-authed="1"{% endif %}>
<header class="navbar px-4 sm:px-6 lg:px-8 border-b border-base-300 bg-base-200">
    <div class="flex-1">
        <a href="/" class="flex w-fit items-center gap-2">
            <span class="font-mono font-bold tracking-[0.16em] text-accent">{{ app_name }}</span>
        </a>
    </div>
    <div class="flex-none">
        <ul class="flex flex-row items-center gap-1">
            {% if user %}
                <li>
                    <a href="/" class="btn btn-ghost btn-sm">
                        <i class="fas fa-plus fa-fw"></i>
                        <span class="hidden sm:inline">New</span>
                    </a>
                </li>
                <li>
                    <a href="/snippets" class="btn btn-ghost btn-sm">
                        <i class="fas fa-layer-group fa-fw"></i>
                        <span class="hidden sm:inline">Snippets</span>
                    </a>
                </li>
                {# Generated only when the cookie-injection stack is included. #}
                {% include "_nav_cookies.html" ignore missing %}
                <li>
                    <a href="/invites" class="btn btn-ghost btn-sm">
                        <i class="fas fa-envelope fa-fw"></i>
                        <span class="hidden sm:inline">Invites</span>
                    </a>
                </li>
                <li><span class="divider divider-horizontal mx-0"></span></li>
                <li>{% include "_theme_toggle.html" %}</li>
                <li>
                    <details class="dropdown dropdown-end">
                        <summary class="btn btn-ghost btn-sm">
                            <i class="fas fa-user-circle fa-fw"></i>
                            <span class="hidden sm:inline truncate max-w-[12ch]">{{ user.username }}</span>
                        </summary>
                        <ul class="dropdown-content menu bg-base-200 border border-base-300 rounded-box z-10 mt-1 w-48 p-1 shadow-lg">
                            <li class="menu-title font-mono text-xs truncate">{{ user.email }}</li>
                            <li><a href="/profile"><i class="fas fa-cog fa-fw"></i> Profile</a></li>
                            <li>
                                <form action="/auth/logout" method="post" class="m-0" hx-boost="false">
                                    <button type="submit" class="w-full text-left">
                                        <i class="fas fa-sign-out-alt fa-fw"></i> Log out
                                    </button>
                                </form>
                            </li>
                        </ul>
                    </details>
                </li>
            {% else %}
                <li>{% include "_theme_toggle.html" %}</li>
                <li><a href="/login" class="btn btn-ghost btn-sm">Log in</a></li>
            {% endif %}
        </ul>
    </div>
</header>

<main id="content" class="px-4 py-8 sm:px-6 lg:px-8">
    <div class="mx-auto {% block width %}max-w-3xl{% endblock %} space-y-4">
        {% block content %}{% endblock %}
    </div>
</main>
</body>
</html>