<!-- HEADER -->
<header>
  <!-- NAVIGATION -->
  <nav class="main-nav container">
    <!-- LEFT NAVIGATION (LINKS) -->

    <ul class="main-nav-links">
      <li>
        <a class="main-nav-link <%= path === '/' ? 'active' : '' %>" href="/"
          ><span class="material-symbols-outlined">storefront</span> Shop</a>
      </li>

      <% if (isAuthenticated) { %>
        <li>
          <a class="main-nav-link <%= path === '/cart' ? 'active' : '' %>" href="/cart"
            ><span class="material-symbols-outlined">shopping_cart</span> Cart</a
          >
        </li>
        
        <li>
          <a class="main-nav-link <%= path === '/orders' ? 'active' : '' %>" href="/orders"
            ><span class="material-symbols-outlined">orders</span> Orders</a
          >
        </li>
      <% } %>
    </ul>

    <!-- SITE LOGO (CENTER) -->
    <a href="/">
      <img class="logo" src="/img/logo.png" alt="urban stride logo" />
    </a>

    <!-- NAVIGATION ACTIONS (RIGHT) -->
    <div class="main-nav-actions">
      <% if (isAuthenticated) { %>
        <form action="/admin/add-product" method="get">
        <button class="main-nav-action add">
          <span class="material-symbols-outlined">add_circle</span> Add
        </button>
      </form>

      <form action="/admin/products" method="get">
        <button class="main-nav-action <%= path === '/admin/products' ? 'active' : '' %>">
          <span class="material-symbols-outlined">account_circle</span> Admin
        </button>
      </form>

      <form id="logoutForm" action="/logout" method="post">
        <button class="main-nav-action <%= path === '/login' ? 'active' : '' %>">
          <span class="material-symbols-outlined">logout</span> Logout
          <input type="hidden" name="_csrf" value="<%= CSRFToken %>">
        </button>
      </form>
      <% } else { %>
        <form action="/login" method="get">
          <button class="main-nav-action <%= path === '/login' ? 'active' : '' %>">
            <span class="material-symbols-outlined">login</span> Login
          </button>
        </form>

        <form action="/signup" method="get">
          <button class="main-nav-action <%= path === '/signup' ? 'active' : '' %>">
            <span class="material-symbols-outlined">person_add</span> Signup
          </button>
        </form>
      <% } %>
    </div>

    <!-- RESP NAV -->
    <div class="resp-nav">
      <button class="resp-nav-btn-links">
        <span class="material-symbols-outlined menu">menu</span>
        <span class="material-symbols-outlined close">close</span>
      </button>

      <button class="resp-nav-btn-actions">
        <span class="material-symbols-outlined">account_circle</span>
      </button>
    </div>
  </nav>
</header>