<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="csrf-token" content={get_csrf_token()} />
    <.live_title default="SimpleshopTheme" suffix=" · Phoenix Framework">
      {assigns[:page_title]}
    </.live_title>
    <link phx-track-static rel="stylesheet" href={~p"/assets/css/app.css"} />
    <script defer phx-track-static src={~p"/assets/js/app.js"}>
    </script>
    <script>
      (() => {
        const setTheme = (theme) => {
          if (theme === "system") {
            localStorage.removeItem("phx:theme");
            document.documentElement.removeAttribute("data-theme");
          } else {
            localStorage.setItem("phx:theme", theme);
            document.documentElement.setAttribute("data-theme", theme);
          }
        };
        if (!document.documentElement.hasAttribute("data-theme")) {
          setTheme(localStorage.getItem("phx:theme") || "system");
        }
        window.addEventListener("storage", (e) => e.key === "phx:theme" && setTheme(e.newValue || "system"));
        
        window.addEventListener("phx:set-theme", (e) => setTheme(e.target.dataset.phxTheme));
      })();
    </script>
  </head>
  <body>
    <nav class="w-full relative z-10 flex items-center px-4 sm:px-6 lg:px-8 justify-between">
      <div>
        <%= if @current_scope && assigns[:conn] && @conn.request_path == "/admin/theme" do %>
          <.link href={~p"/"} class="text-sm hover:underline">&larr; View Shop</.link>
        <% end %>
      </div>
      <ul class="menu menu-horizontal flex items-center gap-4">
        <%= if @current_scope do %>
          <li>
            {@current_scope.user.email}
          </li>
          <li>
            <.link href={~p"/admin/theme"}>Theme</.link>
          </li>
          <li>
            <.link href={~p"/admin/orders"}>Orders</.link>
          </li>
          <li>
            <.link href={~p"/admin/settings"}>Credentials</.link>
          </li>
          <li>
            <.link href={~p"/users/settings"}>Settings</.link>
          </li>
          <li>
            <.link href={~p"/users/log-out"} method="delete">Log out</.link>
          </li>
        <% else %>
          <li>
            <.link href={~p"/users/register"}>Register</.link>
          </li>
          <li>
            <.link href={~p"/users/log-in"}>Log in</.link>
          </li>
        <% end %>
      </ul>
    </nav>
    {@inner_content}
  </body>
</html>
