<!DOCTYPE html>
<html lang="en">
  <head>
    <%- include('./components/header.ejs') %>
  </head>

  <html class="">
    <body class="bg-ctp-base">
      <main class="bg-ctp-base w-full max-w-md mx-auto p-6">
        <div
          class="mt-7 border border-ctp-mantle rounded-xl shadow-sm bg-ctp-surface0"
        >
          <div class="p-4 sm:p-7">
            <div class="text-left">
              <h1 class="block text-2xl font-bold text-ctp-pink font-calsans">
                Login to <%=title%>
              </h1>
            </div>

            <div class="mt-5">
              <div class="grid gap-y-4">
                <!-- Form Group -->
                <div>
                  <label
                    for="name"
                    class="block text-sm mb-2 font-calsans text-white"
                    >Username</label
                  >
                  <div class="relative">
                    <input
                      type="name"
                      id="name"
                      name="name"
                      placeholder="Tactical"
                      class="py-3 px-4 block w-full 0 rounded-lg text-sm disabled:opacity-50 disabled:pointer-events-none bg-ctp-surface1 hover:bg-ctp-surface1/50 focus:outline focus:outline-ctp-pink focus:trasition-all focus:outline:duration-150 text-white"
                      required
                      aria-describedby="usr-error"
                    />
                    <div
                      class="hidden absolute inset-y-0 end-0 pointer-events-none pe-3"
                    >
                      <svg
                        class="size-5 text-red-500"
                        width="16"
                        height="16"
                        fill="currentColor"
                        viewBox="0 0 16 16"
                        aria-hidden="true"
                      >
                        <path
                          d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"
                        />
                      </svg>
                    </div>
                  </div>
                  <p class="hidden text-xs text-red-600 mt-2" id="email-error">
                    Please include a valid email address so we can get back to
                    you
                  </p>
                </div>
                <!-- End Form Group -->

                <!-- Form Group -->
                <div>
                  <label
                    for="password"
                    class="block text-sm mb-2 font-calsans text-white"
                    >Password</label
                  >
                  <div class="relative">
                    <input
                      type="password"
                      id="ap"
                      name="password"
                      placeholder="TacticalBattleToaster"
                      class="py-3 px-4 block w-full 0 rounded-lg text-sm disabled:opacity-50 disabled:pointer-events-none bg-ctp-surface1 hover:bg-ctp-surface1/50 focus:outline focus:outline-ctp-pink focus:trasition-all focus:outline:duration-150 text-white"
                      required
                      aria-describedby="password-error"
                    />
                    <div
                      class="hidden absolute inset-y-0 end-0 pointer-events-none pe-3"
                    >
                      <svg
                        class="size-5 text-red-500"
                        width="16"
                        height="16"
                        fill="currentColor"
                        viewBox="0 0 16 16"
                        aria-hidden="true"
                      >
                        <path
                          d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"
                        />
                      </svg>
                    </div>
                  </div>
                </div>
                <!-- End Form Group -->

                <button
                  type="submit"
                  onclick="login()"
                  class="w-full py-3 px-4 mt-4 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border border-ctp-pink/5 text-zinc-900 bg-ctp-pink/75 hover:bg-ctp-pink/60 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1"
                >
                  Sign In
                </button>
              </div>
              <!-- End Form -->
            </div>
          </div>
        </div>
      </main>
      <svg
        width="100%"
        height="100%"
        id="svg"
        viewBox="0 0 1440 490"
        xmlns="http://www.w3.org/2000/svg"
        class="transition duration-300 ease-in-out delay-150"
      >
        <defs>
          <linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%">
            <stop offset="5%" stop-color="#f5c2e7"></stop>
            <stop offset="95%" stop-color="#f38ba8"></stop>
          </linearGradient>
        </defs>
        <path
          d="M 0,500 L 0,125 C 87.10047846889952,138.0909090909091 174.20095693779905,151.1818181818182 263,141 C 351.79904306220095,130.8181818181818 442.2966507177034,97.36363636363635 532,79 C 621.7033492822966,60.63636363636365 710.6124401913876,57.36363636363636 822,74 C 933.3875598086124,90.63636363636364 1067.2535885167463,127.18181818181819 1174,139 C 1280.7464114832537,150.8181818181818 1360.3732057416269,137.9090909090909 1440,125 L 1440,500 L 0,500 Z"
          stroke="none"
          stroke-width="0"
          fill="url(#gradient)"
          fill-opacity="0.53"
          class="transition-all duration-300 ease-in-out delay-150 path-0"
        ></path>
        <defs>
          <linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%">
            <stop offset="5%" stop-color="#f5c2e7"></stop>
            <stop offset="95%" stop-color="#f38ba8"></stop>
          </linearGradient>
        </defs>
        <path
          d="M 0,500 L 0,291 C 68.63157894736838,271.066985645933 137.26315789473676,251.13397129186603 247,254 C 356.73684210526324,256.86602870813397 507.57894736842115,282.5311004784689 607,276 C 706.4210526315788,269.4688995215311 754.4210526315788,230.7416267942584 828,231 C 901.5789473684212,231.2583732057416 1000.7368421052631,270.5023923444976 1107,287 C 1213.2631578947369,303.4976076555024 1326.6315789473683,297.2488038277512 1440,291 L 1440,500 L 0,500 Z"
          stroke="none"
          stroke-width="0"
          fill="url(#gradient)"
          fill-opacity="1"
          class="transition-all duration-300 ease-in-out delay-150 path-1"
        ></path>
      </svg>
    </body>
  </html>
  <script>
    const HSThemeAppearance = {
      init() {
        const defaultTheme = "default";
        let theme = localStorage.getItem("hs_theme") || defaultTheme;

        if (document.querySelector("html").classList.contains("dark")) return;
        this.setAppearance(theme);
      },
      _resetStylesOnLoad() {
        const $resetStyles = document.createElement("style");
        $resetStyles.innerText = `*{transition: unset !important;}`;
        $resetStyles.setAttribute("data-hs-appearance-onload-styles", "");
        document.head.appendChild($resetStyles);
        return $resetStyles;
      },
      setAppearance(theme, saveInStore = true, dispatchEvent = true) {
        const $resetStylesEl = this._resetStylesOnLoad();

        if (saveInStore) {
          localStorage.setItem("hs_theme", theme);
        }

        if (theme === "auto") {
          theme = window.matchMedia("(prefers-color-scheme: dark)").matches
            ? "dark"
            : "default";
        }

        document.querySelector("html").classList.remove("dark");
        document.querySelector("html").classList.remove("default");
        document.querySelector("html").classList.remove("auto");

        document
          .querySelector("html")
          .classList.add(this.getOriginalAppearance());

        setTimeout(() => {
          $resetStylesEl.remove();
        });

        if (dispatchEvent) {
          window.dispatchEvent(
            new CustomEvent("on-hs-appearance-change", { detail: theme })
          );
        }
      },
      getAppearance() {
        let theme = this.getOriginalAppearance();
        if (theme === "auto") {
          theme = window.matchMedia("(prefers-color-scheme: dark)").matches
            ? "dark"
            : "default";
        }
        return theme;
      },
      getOriginalAppearance() {
        const defaultTheme = "default";
        return localStorage.getItem("hs_theme") || defaultTheme;
      },
    };
    HSThemeAppearance.init();

    window
      .matchMedia("(prefers-color-scheme: dark)")
      .addEventListener("change", (e) => {
        if (HSThemeAppearance.getOriginalAppearance() === "auto") {
          HSThemeAppearance.setAppearance("auto", false);
        }
      });

    window.addEventListener("load", () => {
      const $clickableThemes = document.querySelectorAll(
        "[data-hs-theme-click-value]"
      );
      const $switchableThemes = document.querySelectorAll(
        "[data-hs-theme-switch]"
      );

      $clickableThemes.forEach(($item) => {
        $item.addEventListener("click", () =>
          HSThemeAppearance.setAppearance(
            $item.getAttribute("data-hs-theme-click-value"),
            true,
            $item
          )
        );
      });

      $switchableThemes.forEach(($item) => {
        $item.addEventListener("change", (e) => {
          HSThemeAppearance.setAppearance(
            e.target.checked ? "dark" : "default"
          );
        });

        $item.checked = HSThemeAppearance.getAppearance() === "dark";
      });

      window.addEventListener("on-hs-appearance-change", (e) => {
        $switchableThemes.forEach(($item) => {
          $item.checked = e.detail === "dark";
        });
      });
    });

    const Toast = Swal.mixin({
      toast: true,
      position: "bottom-right",
      customClass: {
        popup: "colored-toast",
      },
      showConfirmButton: false,
      timer: 1500,
      timerProgressBar: true,
    });

    function login() {
      if (
        document.getElementById("ap").value &&
        document.getElementById("name").value
      ) {
        axios
          .post("/api/login", {
            name: document.getElementById("name").value,
            password: document.getElementById("ap").value,
          })
          .then((response) => {
            Swal.fire({
              icon: response.data.icon,
              title: response.data.title,
              text: response.data.discription,
            });
            if (response.data.title == "Success") {
              setTimeout(() => {
                window.location.replace("/dashboard");
              }, 2000);
            }
          })
          .catch((error) => {
            Toast.fire({
              icon: "error",
              title: "Error",
              description: "Failed to send the request to the API!",
            });
            console.error("API request error:", error);
          });
      }
    }
  </script>
  <script>
    // Check localStorage for the theme preference
    var theme = localStorage.getItem("hs-theme");

    // If no theme preference is found, default to 'light'
    if (!theme) {
      theme = "light";
    }

    // Apply the current theme to the document
    document.documentElement.classList.add(theme);
  </script>
</html>
