<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link rel="stylesheet"
    href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@300;400;500;600;700&display=swap"
    rel="stylesheet">

  <link rel="stylesheet" href="/css/app.css">
  <title>A Book Store</title>
</head>

<body>
  <!-- NAVBAR -->
  <nav class="container mx-auto flex justify-between py-4  ">
    <div>
      <a href="/">
        <img src="/img/logo.png" class="h-14" alt="logo_img">
      </a>
    </div>

    <div class=" my-auto flex">

      <span class="dropdown mr-1 my-auto">
        <img class="my-auto h-10 mr-2" src="/img/user.png" alt="user_img">

        <!-- DROPDOWN -->
        <ul class="dropdown-menu absolute hidden text-gray-700 pt-1">
          <% if(user){ %>

            <li class=""><a class="font-bold text-l py-2 px-4 block whitespace-no-wrap"
                href="/customer/orders">Orders</a></li>

            <% if(user.role==='seller' ){ %>

              <li class=""><a class="font-bold text-l py-2 px-4 block whitespace-no-wrap"
                  href="/seller/upload-book">Upload Book</a></li>
              <li class=""><a class="font-bold text-l py-2 px-4 block whitespace-no-wrap"
                  href="/seller/orders">Order Received</a></li>

              <% } %>

                <form id="logout" action="/logout" method="POST">
                  <li class=""><a onclick="document.getElementById('logout').submit()"
                      class="font-bold text-l py-2 px-4 block whitespace-no-wrap" href="#">Logout</a></li>
                </form>

                <% }else{ %>
                  <li class=""><a class="font-bold text-l  py-2 px-4 block whitespace-no-wrap" href="/login">Login</a>
                  </li>
                  <li class=""><a class="font-bold text-l  py-2 px-4 block whitespace-no-wrap" href="/register">Sign
                      Up</a>
                  </li>
                  <% } %>

        </ul>
        <!-- DROPDOWN END -->


      </span>

      <a class=" cartCounter flex rounded-2xl " href="/cart">
        <span id="cartCounter" class="font-bold text-2xl my-auto">
          <%= session.cart ? session.cart.totalQty : "" %>
        </span>
        <img class="my-auto h-10" src="/img/shopping-cart.png" alt="user_img">
      </a>

    </div>

  </nav>
  <!-- NAVBAR END -->

  <%- body %>


    <script src="/js/app.js"></script>
</body>

</html>