<div class="backdrop"></div>
<header class="main-header">
  <button id="side-menu-toggle">Menu</button>
  <nav class="main-header__nav">
    <ul class="main-header__item-list">
      <li class="main-header__item">
        <a class="<%= path === '/' ? 'active' : '' %>" href="/">Shop</a>
      </li>
      <li class="main-header__item">
        <a class="<%= path === '/products' ? 'active' : '' %>"
           href="/products">Products</a>
      </li>
      <% if(isAuthenticated) { %>
        <li class="main-header__item">
          <a class="<%= path === '/cart' ? 'active' : '' %>" href="/cart">Cart</a>
        </li>
        <li class="main-header__item">
          <a class="<%= path === '/orders' ? 'active' : '' %>"
             href="/orders">Orders</a>
        </li>
        <li class="main-header__item">
          <a class="<%= path === '/admin/add-product' ? 'active' : '' %>"
             href="/admin/add-product">Add Product
          </a>
        </li>
        <li class="main-header__item">
          <a class="<%= path === '/admin/products' ? 'active' : '' %>"
             href="/admin/products">Admin Products
          </a>
        </li>
      <% } %>
    </ul>
    <ul class="main-header__item-list">
      <% if(!isAuthenticated) { %>
        <li class="main-header__item">
          <a class="<%= path === '/login' ? 'active' : '' %>" href="/login">Login</a>
        </li>
        <li class="main-header__item">
          <a class="<%= path === '/signup' ? 'active' : '' %>" href="/signup">Signup</a>
        </li>
      <% } else { %>
        <li class="main-header__item">
          <form action="/logout" method="POST">
            <input type="hidden" name="_csrf" value="<%= csrfToken %>">
            <button type="submit">Logout</button>
          </form>
        </li>
      <% } %>
    </ul>
  </nav>
</header>

<nav class="mobile-nav">
  <ul class="mobile-nav__item-list">
    <li class="mobile-nav__item">
      <a class="<%= path === '/' ? 'active' : '' %>" href="/">Shop</a>
    </li>
    <li class="mobile-nav__item">
      <a class="<%= path === '/products' ? 'active' : '' %>"
         href="/products">Products</a>
    </li>
    <% if(isAuthenticated) { %>
      <li class="mobile-nav__item">
        <a class="<%= path === '/cart' ? 'active' : '' %>" href="/cart">Cart</a>
      </li>
      <li class="mobile-nav__item">
        <a class="<%= path === '/orders' ? 'active' : '' %>"
           href="/orders">Orders</a>
      </li>
      <li class="mobile-nav__item">
        <a class="<%= path === '/admin/add-product' ? 'active' : '' %>"
           href="/admin/add-product">Add Product
        </a>
      </li>
      <li class="mobile-nav__item">
        <a class="<%= path === '/admin/products' ? 'active' : '' %>"
           href="/admin/products">Admin Products
        </a>
      </li>
      <li class="mobile-nav__item">
        <form action="/logout" method="POST">
          <input type="hidden" name="_csrf" value="<%= csrfToken %>">
          <button type="submit">Logout</button>
        </form>
      </li>
    <% } else { %>
      <li class="mobile-nav__item">
        <a class="<%= path === '/login' ? 'active' : '' %>"
           href="/login">Login
        </a>
      </li>
      <li class="mobile-nav__item">
        <a class="<%= path === '/signup' ? 'active' : '' %>"
           href="/signup">Signup
        </a>
      </li>
    <% } %>
  </ul>
</nav>
