<% const nav__active_item_class = "flex gap-1 py-2 pl-3 pr-4 text-white bg-green-600 rounded md:bg-transparent md:text-green-600 md:p-0 dark:text-white md:dark:text-green-500"; %>

<% const nav__default_item_class = "flex gap-1 py-2 pl-3 pr-4 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-green-600 md:p-0 dark:text-white md:dark:hover:text-green-500 dark:hover:bg-gray-600 dark:hover:text-white md:dark:hover:bg-transparent"; %>

<nav class="bg-white border-gray-200 dark:bg-gray-900 fixed w-full z-10">
  <div
    class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4"
  >
    <a href="/" class="flex items-center">
      <img src="/logo.svg" class="h-8 mr-3" alt="Flowbite Logo" />
      <span
        class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white"
        >Mojeeto Shop</span
      >
    </a>
    <button
      data-collapse-toggle="navbar-default"
      type="button"
      class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-600 dark:focus:ring-gray-600"
      aria-controls="navbar-default"
      aria-expanded="false"
    >
      <span class="sr-only">Open main menu</span>
      <svg
        class="w-5 h-5"
        aria-hidden="true"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 17 14"
      >
        <path
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M1 1h15M1 7h15M1 13h15"
        />
      </svg>
    </button>
    <div class="hidden w-full md:block md:w-auto" id="navbar-default">
      <ul
        class="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-600"
      >
        <li>
          <a
            href="/"
            class="<%= locals.path === "/" ? nav__active_item_class : nav__default_item_class%>"
            >Shop</a
          >
        </li>
        <li>
          <a
            href="/cart"
            class="<%= locals.path === "/cart" ? nav__active_item_class : nav__default_item_class%>"
            >Cart</a
          >
        </li>
<% if (locals.isAuthenticated) { %>
    <% if (locals.isAdmin) {%>
      <li>
        <a
          href="/manage-products"
          class="<%= locals.path === "/manage-products" ? nav__active_item_class : nav__default_item_class%>"
          >Manage Products</a
        >
      </li>
        <% } %>
        <li>
          <a
            href="/logout"
            class="<%= nav__default_item_class %>"
            ><span>Logout</span
            ><span class="hidden md:block"
              ><%- include("../components/icons/logout.svg") %></span
            ></a
          >
        </li>
            <% } else { %>
        <li>
          <a
            href="/login"
            class="<%= locals.path === "/login" ? nav__active_item_class : nav__default_item_class%>"
            ><span>Login</span
            ><span class="hidden md:block"
              ><%- include("../components/icons/login.ejs") %></span
            ></a
          >
        </li>
        <li>
          <a
            href="/signup"
            class="<%= locals.path === "/signup" ? nav__active_item_class : nav__default_item_class%>"
            >Sign-up</a
          >
        </li>
        <% } %>
      </ul>
    </div>
  </div>
</nav>
