// $(".sidebar-collapse-button").on("click", function () {

//     const sidebar = $("#sidebar")
//     const content = $("#webContent")
//     const collapsed = !sidebar.hasClass("sidebar-enlarged");

//     if (collapsed) {
//         sidebar.addClass("sidebar-enlarged");
//         sidebar.find(".nav-item").tooltip("disable");
//         content.addClass("webcontent-collapsed")
//     }
//     else {
//         sidebar.removeClass("sidebar-enlarged");
//         sidebar.find(".nav-item").tooltip("enable");
//         content.removeClass("webcontent-collapsed")
//     }
// });

$(document).ready(function() {
    const getStoredTheme = () => localStorage.getItem("theme");
    const setStoredTheme = theme => localStorage.setItem("theme", theme);
    const getPreferredTheme = () => {
        const storedTheme = getStoredTheme();
        if (storedTheme) return storedTheme;
        return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
    };

    const setTheme = theme => {
        if (theme === "auto" && window.matchMedia("(prefers-color-scheme: dark)").matches) {
            theme = "dark";
        }
        $("body").attr("data-bs-theme", theme);
    };

    const getThemeIcon = theme => {
        return {
            "auto": "diamond-half",
            "light": "sun",
            "dark": "moon-stars",
        }[theme];
    };

    const showActiveTheme = (theme, focus = false) => {
        const themeSwitcherButton = $("#themeSwitcher");
        if (!themeSwitcherButton) {
            warn("theme switcher button not found");
            return;
        }

        // Swap the shown icon
        const themeSwitcherIcon = $(themeSwitcherButton).find("i.bi");
        const newIcon = getThemeIcon(theme);
        themeSwitcherIcon.removeClass().addClass(`bi bi-${newIcon}`);

        if (focus) themeSwitcherButton.focus();
    };

    $("#themeSwitcher").on("click", function() {
        // 1. determine the current theme
        const theme = getStoredTheme();

        // 2. rotate to the next theme
        const themes = ["light", "dark", "auto"];
        const nextIndex = themes.indexOf(theme) + 1;
        const nextTheme = nextIndex >= themes.length ? themes[0] : themes[nextIndex];

        // 3. apply the new theme
        setStoredTheme(nextTheme);
        setTheme(nextTheme);
        showActiveTheme(nextTheme);
    });

    var theme = getPreferredTheme();
    setTheme(theme);
    showActiveTheme(theme);

});