<section class="cart">

  <% if(session.cart && session.cart.totalQty> 0 ){ %>

    <!-- ORDER -->
    <div class="order container mx-auto w-1/2">
      <div class="flex items-center border-b border-gray-300 pb-4">
        <h1 class="font-bold ml-4 text-2xl">Order Summary</h1>
      </div>

      <!-- CART ITEMS -->
      <div>

        <% for(let order of Object.values(session.cart.orders) ) {%>

          <% for(let books of Object.values(order) ) {%>
            <!-- ITEM -->
            <div class="flex items-center my-8">
              <img class="w-24" src="<%= books.book.image %>" alt="">
              <div class="flex-1 ml-4">

                <h1 class="text-lg">
                  <%= books.book.name %>
                </h1>

              </div>
              <span class="flex-1">
                ₹ <%= books.book.price %> × <%= books.qty %> =
              </span>
              <span class="font-bold  text-lg">₹ <%= books.qty * books.book.price %> </span>
            </div>
            <!-- ITEM END -->

            <% } %>
              <% } %>
      </div>
      <!-- CART ITEMS END  -->

      <hr>

      <!-- DETAIL FORM  -->
      <div class=" text-right  ">
        <div class="py-4">
          <div>
            <span class="text-lg font-bold">Total Amount</span>
            <span class="amount text-2xl font-bold ml-2">₹<%= session.cart.totalPrice %></span>
          </div>
          <% if(user){ %>
            <form action="/orders" method="POST" class="mt-12">
              <input name="phone" placeholder="Phone Number" class=" p-2 w-1/2 mb-4 rounded-xl border-4 border-blue-500"
                type="text">
              <input name="address" placeholder="Adderess" class="p-2 w-1/2 mb-4 rounded-xl border-4 border-blue-500"
                type="text">
              <div>
                <button type="submit" class="btn-go-back px-6 py-2 rounded-full text-white font-bold mt-6">
                  Order Now
                </button>
              </div>
            </form>
            <% } else { %>
              <a href="/login" class="inline-block cursor-pointer btn-go-back px-6 py-2 rounded-full  font-bold mt-6">
                Login to continue </a>
              <% } %>

        </div>
      </div>
      <!-- DETAIL FORM END -->
    </div>
    <!-- ORDER END  -->

    <% } else { %>
      <!-- EMPTY CART  -->
      <div class="empty-cart">
        <div class="container mx-auto text-center">
          <h1 class="text-3xl font-bold">Cart Empty</h1>
          <h1 class="text-2xl font-bold p-10 ">
            <q>
              Books are the quietest and most constant of friends; <br>
              they are the most accessible and wisest of counselors, <br>
              and the most patient of teachers.
            </q>
          </h1>
          <h6 class="text-xl pb-2"><em>-Charles W. Eliot</em></h6>
          <a href="/" class=" btn-go-back inline-block px-6 rounded-full  font-bold pl-6 pr-6 pt-3 pb-3 mt-4">Go
            Back</a>
          <img class="w-2/5 mx-auto" src="img/empty.png" alt="">
        </div>
      </div>
      <!-- EMPTY CART END  -->

      <% } %>

</section>