<style type="text/css">
 .cart .cart-labels .cart-label > div {
  border: 1px solid #aaa;
 }
 .cart .product > div > div {
   border: 1px solid #ddd;
 }
 .cart .product .product-name > div {
   white-space: nowrap;
   overflow: hidden;
 }
 .cart .total-inner {
   border: 1px solid #888;
 }
 .cart .product-element {
   text-align: center;
 }
 @media (min-width: 768px) {
   .cart .product-element { text-align: right; }
   .cart .product-element.product-name { text-align: left; }
 }
</style>

<div class="container">
  <div class="row cart">
    <div class="product-list col-12">
      <% if (locals.cart && locals.cart.content) { %>
      <div class="product cart-labels row d-sm-none d-xs-none d-md-flex text-center">
        <div class="cart-label col-5"><div class="p-1 m-0">Product</div></div>
        <div class="cart-label col-2"><div class="p-1 m-0">Price</div></div>
        <div class="cart-label col-2"><div class="p-1 m-0">Quantity</div></div>
        <div class="cart-label col-3"><div class="p-1 m-0">Total</div></div>
      </div>
      <% locals.cart.content.forEach( line => { %>
        <div class="product row mt-2">
          <div class="product-element product-name col-12 col-md-5 font-weight-bold">
            <div class="p-1 m-0">
              <a href="<%= locals.linkTo('products', line.product._id) %>"><%= line.product.name %></a>
              <% if (locals.quantityErrorsMap && typeof locals.quantityErrorsMap[line.product._id.toString()] === `number`) { %>
                <div style="white-space: normal;color:red;" class="font-weight-normal">
                  <%= locals.quantityErrorsMap[line.product._id.toString()] === 0 ? 'This product is not available anymore' : `Requested quantities are not available. (only ${locals.quantityErrorsMap[line.product._id]} left)` %>
                </div>
              <% } %>
            </div>
          </div>
          <div class="product-element product-price col-12 col-md-2">
            <div class="p-1 m-0"><span class="d-md-none">Price: </span><%= line.finalPrice %> </div>
          </div>
          <div class="product-element product-quantity col-12 col-md-2">
            <div class="p-1 m-0">
              <%= line.quantity %>
            </div>
          </div>
          <div class="product-element product-total col-12 col-md-3">
            <div class="p-1 m-0"><span class="d-md-none">Total: </span><%= line.finalPrice * line.quantity %> </div>
          </div>
        </div>
      <% }) %><!-- end product.forEach -->
        <div class="total row justify-content-end mt-2">
          <div class="col-12 col-md-3 product-element">
            <div class="total-inner p-1 m-0">
              <span class="d-md-none">Order total: </span>
              <%= locals.config.currency.symbol %><%= locals.cart.content.reduce((total, line) => total + line.finalPrice * line.quantity, 0).toFixed(2); %>
            </div>
          </div>
        </div>
      <% } else { %>
        Order is empty
      <% } %>
    </div>
  </div>
</div>