<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title><%=title%></title>
  <link rel="stylesheet" href="/assets/tailwind.css" />
  <script src="/node_modules/preline/dist/preline.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.5.2/css/all.css">
  <!--
   Charts
  -->
  <link rel="stylesheet" href="/node_modules/apexcharts/dist/apexcharts.css" />
  <script src="/node_modules/lodash/lodash.min.js"></script>
  <script src="/node_modules/apexcharts/dist/apexcharts.min.js"></script>
  <script src="https://preline.co/assets/js/hs-apexcharts-helpers.js"></script>

  <!--
   End Charts
  -->

  <script>
    const requiredKeys = ["d", "u", "c", "k", "e", "e"];
    let currentKeyIndex = 0;

    document.addEventListener("keydown", function (event) {
      if (event.key === requiredKeys[currentKeyIndex]) {
        currentKeyIndex++;

        if (currentKeyIndex === requiredKeys.length) {
          Swal.fire({
            icon: "question",
            title: "duckee",
            text: "certified duckee moment",
          });

          currentKeyIndex = 0;
        }
      } else {
        currentKeyIndex = 0;
      }
    });
  </script>
  <script>
    /**
     * Utility function to calculate the current theme setting.
     * Look for a local storage value.
     * Fall back to system setting.
     * Fall back to light mode.
     */
    function calculateSettingAsThemeString({
      localStorageTheme,
      systemSettingDark,
    }) {
      if (localStorageTheme !== null) {
        return localStorageTheme;
      }

      if (systemSettingDark.matches) {
        return "dark";
      }

      return "light";
    }

    /**
     * Utility function to update the button text and aria-label.
     */
    function updateButton({ buttonEl, isDark }) {
      const newCta = isDark ? "Change to light theme" : "Change to dark theme";
      // use an aria-label if you are omitting text on the button
      // and using a sun/moon icon, for example
      buttonEl.setAttribute("aria-label", newCta);
      buttonEl.innerText = newCta;
    }

    /**
     * Utility function to update the theme setting on the html tag
     */
    function updateThemeOnHtmlEl({ theme }) {
      document.querySelector("html").setAttribute("data-theme", theme);
    }

    /**
     * On page load:
     */

    /**
     * 1. Grab what we need from the DOM and system settings on page load
     */
    const button = document.querySelector("[data-theme-toggle]");
    const localStorageTheme = localStorage.getItem("theme");
    const systemSettingDark = window.matchMedia("(prefers-color-scheme: dark)");

    /**
     * 2. Work out the current site settings
     */
    let currentThemeSetting = calculateSettingAsThemeString({
      localStorageTheme,
      systemSettingDark,
    });

    /**
     * 3. Update the theme setting and button text accoridng to current settings
     */
    updateButton({ buttonEl: button, isDark: currentThemeSetting === "dark" });
    updateThemeOnHtmlEl({ theme: currentThemeSetting });
    document.body.classList.add(currentThemeSetting);

    /**
     * 4. Add an event listener to toggle the theme
     */
    button.addEventListener("click", (event) => {
      const newTheme = currentThemeSetting === "dark" ? "light" : "dark";
      localStorage.setItem("theme", newTheme);
      updateButton({ buttonEl: button, isDark: newTheme === "dark" });
      updateThemeOnHtmlEl({ theme: newTheme });

      if (currentThemeSetting == "dark") {
        changeto = "mocha";
        document.body.classList.replace("frappe", "mocha");
      }
      if (currentThemeSetting == "light") {
        changeto = "frappe";
        document.body.classList.replace("mocha", "frappe");
      }
    });
  </script>
</head>
