{% load lucide static ui %}

{% comment %}
    The page skeleton, with no branding of its own. `_platform_base.html` dresses it
    as RosterChief, `_club_base.html` as a club; the `branding` context processor
    picks between them per tenant.
{% endcomment %}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>
            {% block title %}RosterChief{% endblock title %}
        </title>

        {% comment %}
            Apply the stored theme before first paint, otherwise the page flashes the wrong
            colours. Nothing stored means "auto": we set no attribute at all, so daisyUI's
            `dark --prefersdark` follows the OS.
        {% endcomment %}
        <script>
            (() => {
                const stored = localStorage.getItem("theme");
                if (stored) document.documentElement.setAttribute("data-theme", stored);
            })();
        </script>

        <link rel="stylesheet" href="{% static 'css/app.css' %}"/>

        {# After the stylesheet: brand overrides (logo urls, club colours) must win. #}
        {% block extra %}{% endblock extra %}
    </head>

    {% comment %}
        An app shell: the viewport is the frame, and exactly one region scrolls. The body is a
        flex column pinned to the screen height with overflow hidden, so the navbar and the
        sidebar cannot be scrolled away — only <main> moves. Leave the body scrollable instead
        and a "sticky" sidebar still drifts on a long page, which is the thing this is for.
    {% endcomment %}
    <body class="flex h-screen flex-col overflow-hidden bg-base-200">
        {% comment %}
            Every text label on the right (theme name, "Django admin", the user's email) is
            wrapped in `hidden sm:inline` — icon-only below the `sm` breakpoint, with the
            button's own padding doing the rest (no fixed width to fight). None of these
            buttons wrap or shrink on their own (button labels don't break), so on a
            360-400px phone the unlabelled row is what keeps the navbar from forcing the
            whole page wider than the device — which, left unchecked, makes the browser
            zoom the entire layout out to fit rather than actually rendering at device width.
            `min-w-0` on the brand block matters for the same reason: a flex item defaults to
            `min-width: auto`, which ignores `flex-1` and refuses to shrink past its content's
            intrinsic width.
        {% endcomment %}
        <div class="navbar shrink-0 border-b border-base-300 bg-base-100 px-3 shadow-sm sm:px-6">
            <div class="my-4 flex min-w-0 flex-1 items-center gap-1">
                {% comment %}
                    Empty for pages with no menu (the auth screens) -- management/base.html
                    and controlpanel/base.html are the only overriders, each pairing this
                    with its own `{% block mobile_menu %}` dialog below in `main`.
                {% endcomment %}
                {% block nav_toggle %}{% endblock nav_toggle %}
                <div class="min-w-0">
                    {% block brand %}{% endblock brand %}
                </div>
            </div>

            {% comment %}
                Hidden below `lg` wherever a hamburger drawer exists to hold them instead
                (management/base.html, controlpanel/base.html override `nav_icons_class` to
                `hidden lg:flex` and duplicate these same three controls inside their
                {% block nav_toggle %} dialog) -- on a page with no such drawer (the auth
                screens, the public club site) the default keeps them in the navbar itself,
                since there'd be nowhere else for them to go.
            {% endcomment %}
            <div class="{% block nav_icons_class %}flex items-center{% endblock nav_icons_class %}">
                <button class="btn btn-ghost" type="button" data-theme-toggle aria-label="Theme">
                    <span data-theme-icon="light" class="hidden items-center gap-4">{% lucide "sun" size=20 %} <span class="hidden sm:inline">light</span></span>
                    <span data-theme-icon="dark" class="hidden items-center gap-4">{% lucide "moon" size=20 %} <span class="hidden sm:inline">dark</span></span>
                    <span data-theme-icon="auto" class="hidden items-center gap-4">{% lucide "sun-moon" size=20 %} <span class="hidden sm:inline">auto</span></span>
                </button>

                {% if user.is_authenticated %}
                    {% if has_management_access %}
                        {# Only ever true on a club subdomain -- see management.context_processors.management_link. #}
                        <a class="btn btn-ghost gap-4" href="{% url "management:home" %}" aria-label="Management">{% lucide "layout-dashboard" %}<span class="hidden sm:inline">Management</span></a>
                    {% endif %}

                    {% if user.is_superuser %}
                        <a class="btn btn-ghost gap-4" href="{% url "admin:index" %}" aria-label="Django admin">{% lucide "shield-cog" %}<span class="hidden sm:inline">Django admin</span></a>
                    {% endif %}
                {% endif %}
            </div>

            {% if user.is_authenticated %}
                <div class="dropdown dropdown-end">
                    <div tabindex="0" role="button" class="btn btn-ghost gap-4" aria-label="Account">{% lucide "circle-user" %}<span class="hidden max-w-40 truncate sm:inline">{{ user.get_full_name }}</span></div>
                    <ul tabindex="0" class="menu dropdown-content z-10 mt-2 w-60 rounded-box bg-base-100 p-2 shadow border border-base-content/20">
                        <li class="menu-title truncate sm:hidden">{{ user.email }}</li>
                        <li>
                            <a href="{% url 'mfa_index' %}">{% lucide "shield-check" size=16 %} Two-factor authentication</a>
                        </li>
                        <li>
                            <a href="{% url 'account_change_password' %}">{% lucide "key-round" size=16 %} Change password</a>
                        </li>
                        <li>
                            <a href="{% url 'account_logout' %}">{% lucide "log-out" size=16 %} Sign out</a>
                        </li>
                    </ul>
                </div>
            {% else %}
                <a class="btn btn-ghost gap-4" href="{% url 'account_login' %}">{% lucide "log-in" size=16 %} Sign in</a>
            {% endif %}
        </div>

        <div class="flex flex-1 overflow-hidden">
            {% comment %}
                The sidebar is a sibling of <main>, not inside it, so it sits outside the one
                scrolling region and stays put by construction. Pages with no menu (the auth
                screens) leave the block empty and <main> simply takes the full width.
            {% endcomment %}
            {% block menu %}{% endblock menu %}

            {% comment %}
                `scrollbar-gutter: stable` reserves the scrollbar's width whether or not
                the page actually overflows -- without it, a short page (nothing to
                scroll) renders a hair wider than a tall one (scrollbar eats the width),
                and switching between them visibly shifts the content.
            {% endcomment %}
            <main class="flex-1 overflow-y-auto scrollbar-gutter-stable">
                <div class="mx-auto w-full px-8 py-6">
                    {% if messages %}
                        <div class="mb-6 w-full space-y-2">
                            {% for message in messages %}
                                {% with alert=message|as_alert %}
                                    <div class="alert alert-soft border-2 {{ alert.css }}" role="alert">
                                        {% lucide alert.icon size=20 %}
                                        <div>
                                            <div class="font-bold">{{ alert.title }}</div>
                                            <div class="text-sm">{{ alert.body }}</div>
                                        </div>
                                    </div>
                                {% endwith %}
                            {% endfor %}
                        </div>
                    {% endif %}

                    {% block main %}{% endblock main %}
                </div>

                <footer class="mx-auto w-full px-8 pb-6 text-center text-xs opacity-60">
                    &copy; {% now "Y" %} Bernard Siebens &middot; <a class="link link-hover" href="mailto:info@rosterchief.app">info@rosterchief.app</a>
                </footer>
            </main>
        </div>

        <script>
            // The button cycles light -> dark -> auto. "auto" removes the attribute and the
            // stored key rather than writing the OS's current choice: that keeps daisyUI's
            // `dark --prefersdark` following the OS *live*, so the page flips when the OS
            // does. Storing a snapshot would freeze it at whatever the OS was on click.
            const MODES = ["light", "dark", "auto"];
            const currentMode = () => localStorage.getItem("theme") || "auto";

            const applyMode = (mode) => {
                if (mode === "auto") {
                    localStorage.removeItem("theme");
                    document.documentElement.removeAttribute("data-theme");
                } else {
                    localStorage.setItem("theme", mode);
                    document.documentElement.setAttribute("data-theme", mode);
                }

                // Show the label for the *chosen* mode, not the resulting colours -- otherwise
                // "auto" would be indistinguishable from whichever theme it resolved to.
                // `hidden` and `inline-flex` are both display utilities, so the visible one
                // must carry exactly one of them: leaving both on would let stylesheet order,
                // not class order, decide who wins.
                document.querySelectorAll("[data-theme-icon]").forEach((label) => {
                    const active = label.dataset.themeIcon === mode;
                    label.classList.toggle("hidden", !active);
                    label.classList.toggle("inline-flex", active);
                });
                document.querySelectorAll("[data-theme-toggle]").forEach((button) => button.setAttribute("aria-label", `Theme: ${mode}`));
            };

            document.querySelectorAll("[data-theme-toggle]").forEach((button) => {
                button.addEventListener("click", () => applyMode(MODES[(MODES.indexOf(currentMode()) + 1) % MODES.length]));
            });

            applyMode(currentMode());
        </script>

        <script>
            // A TOTP code is 6 characters, a recovery code 8, and allauth accepts either in
            // the same field. The boxed otp layout only fits six, so past that we fall back
            // to a plain input rather than letting the text spill out of the boxes. Boxing
            // the field to six and calling it done would lock recovery codes out entirely.
            document.querySelectorAll("[data-otp]").forEach((otp) => {
                const input = otp.querySelector("input");
                if (!input) return;

                const fit = () => {
                    const boxed = input.value.length <= 6;
                    otp.classList.toggle("otp", boxed);
                    otp.classList.toggle("otp-lg", boxed);
                    otp.querySelectorAll("span").forEach((box) => box.classList.toggle("hidden", !boxed));
                    input.classList.toggle("input", !boxed);
                    input.classList.toggle("input-lg", !boxed);
                };

                input.addEventListener("input", fit);
                fit();
            });
        </script>

        {% comment %}
            allauth puts page-level scripts and out-of-form markup here — notably the
            hidden `mfa_login` form the passkey button submits. Without this block that
            form is never rendered and "Sign in with a passkey" is a dead button.
        {% endcomment %}
        {% block extra_body %}{% endblock extra_body %}
    </body>
</html>
