<%- include('../includes/head.ejs')  %>
<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 margin-bottom-md">
    <% if (orders.length > 0) {%>
      <!-- CARD GRID -->
      <ul class="cart-products-list orders-list margin-bottom-md">
        <% orders.forEach((order) => { %>
        <li class="orders-product-container card margin-bottom-md">
          <div class="orders-product-header">
            <p class="product-title">
              Order &horbar; # <%= order._id %>
            </p>
            <form action="/orders/<%= order._id %>" method="post">
              <input type="hidden" name="_csrf" value="<%= CSRFToken %>">
              <button class="submit-btn orders" type="submit">
                Get Invoice
              </button>
            </form>
          </div>

          <ul class="orders-product-list">
            <% order.products.forEach((p) => { %>
            <li>
              <p class="product-price"><%= p.product.title %> (<%= p.quantity %>)</p>
            </li>
            <% }); %>
          </ul>

          <p class="product-description"><%= order.dateCreated.toDateString() %></p>
            <form action="/orders/<%= order._id %>" method="post">
              <input type="hidden" name="_csrf" value="<%= CSRFToken %>">
              <button type="submit" class="submit-btn btn-hidden">Get Invoice</button>
            </form>
        </li>
        <% }); %>
    </ul>

    <% } 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') %>