neiam /dms

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <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 type="text/javascript" src="/assets/js/app.js"></script>
    <title>DMS{% if title %} :: {{ title }}{% endif %}</title>
    <style>body { font-family: "B612 Mono", monospace; }</style>
    <script>
      (() => {
        const SYSTEM_DARK = "afterdark";
        const SYSTEM_LIGHT = "her";
        const mq = window.matchMedia("(prefers-color-scheme: dark)");
        const systemTheme = () => mq.matches ? SYSTEM_DARK : SYSTEM_LIGHT;
        window.dmsSetTheme = (theme) => {
          if (theme === "system") {
            localStorage.removeItem("dms:theme");
            document.documentElement.setAttribute("data-theme", systemTheme());
          } else {
            localStorage.setItem("dms:theme", theme);
            document.documentElement.setAttribute("data-theme", theme);
          }
        };
        if (!document.documentElement.hasAttribute("data-theme")) {
          window.dmsSetTheme(localStorage.getItem("dms:theme") || "system");
        }
        mq.addEventListener("change", () => {
          if (!localStorage.getItem("dms:theme")) window.dmsSetTheme("system");
        });
      })();
    </script>
</head>
<body>
<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">DMS</span>
        </a>
    </div>
    <div class="flex-none">
        <ul class="flex flex-row items-center gap-1">
            {% if user %}
                <li>
                    <a href="/uploads" class="btn btn-ghost btn-sm">
                        <i class="fas fa-images fa-fw"></i>
                        <span class="hidden sm:inline">Uploads</span>
                    </a>
                </li>
                <li>
                    <a href="/search" class="btn btn-ghost btn-sm">
                        <i class="fas fa-magnifying-glass fa-fw"></i>
                        <span class="hidden sm:inline">Search</span>
                    </a>
                </li>
                <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>
                    <a href="/api-tokens" class="btn btn-ghost btn-sm">
                        <i class="fas fa-mobile-screen fa-fw"></i>
                        <span class="hidden sm:inline">Devices</span>
                    </a>
                </li>
                <li>
                    <a href="/failed" class="btn btn-ghost btn-sm">
                        <i class="fas fa-gear fa-fw fa-spin"></i>
                        <span class="hidden sm:inline">Work</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">
                                    <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>

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

<div class="hidden">
    <div class="text-cool bg-cool border-cool btn-cool"></div>
    <div class="text-cyan bg-cyan border-cyan"></div>
    <div class="text-good bg-good border-good"></div>
    <div class="text-lime bg-lime border-lime"></div>
    <div class="text-warm bg-warm border-warm"></div>
    <div class="text-hot bg-hot border-hot"></div>
    <div class="text-danger bg-danger border-danger"></div>
    <div class="text-critical bg-critical border-critical"></div>
</div>
</body>
</html>