<%- include('../includes/head.ejs')  %>
<script src="/js/forms.js" defer></script>
<link rel="stylesheet" href="/css/error.css" />
<link rel="stylesheet" href="/css/queries.css" />
</head>

<body>
<%- include('../includes/navigation.ejs') %>

<!-- MAIN CONTENT -->
<main>
  <div class="container cart-products-list margin-bottom-md">
    <% if (products.length > 0) {%>
      <!-- CARD GRID -->
      <ul>
      <!-- CART ITEM -->
      <% for(let product of products) { %>
      <li class="cart-products-container card margin-bottom-md">
        <div class="cart-product-details">
          <p class="product-title"><%= product.productId.title %></p>
          <p class="product-price"><span>Quantity: <%= product.quantity %></span></p>
        </div>

        <form id="submitForm" action="/cart-delete-item" method="post">
          <button class="submit-btn delete" type="submit">Delete</button>
          <input type="hidden" name="productId" value="<%= product.productId._id%>">
          <input type="hidden" name="_csrf" value="<%= CSRFToken %>">
        </form>
      </li>
      <% } %>
    </ul>
  </div>

  <div class="checkout margin-bottom-sm">
    <div>
      <a href="/checkout" class="submit-btn">Order Now</a>
    </div>
    <% } else {%>
      <div class="error-card card card--linear margin-bottom-sm">
        <h1 class="error-code">MT!</h1>
        <p class="error-title">Your cart is lonely!</p>
        <p class="error-subtitle margin-bottom-sm">
          Quick! Add some items to make it feel happy!
        </p>
        <p class="error-message">[ðŸ¥¹ Your cart is empty ðŸ›’]</p>
      </div>
    <% } %>
  
<%- include('../includes/end.ejs') %>