
    <%- include("partials/_head") %>

    
    <%- include("partials/_header") %>

    <!-- Start of Main -->
    <main class = "container">
		<!--  Shopping cart table wrapper  -->
		<div id = "shopping-cart">
			<div class = "txt-heading">
				<h1>Shopping cart</h1>
			</div>
			<a onClick = "emptyCart()" id = "btnEmpty">Empty Cart</a>
			<table class = "tbl-cart" cellpadding = "10" cellspacing="1">
				<thead>
					<tr>
						<th>Name</th>
						<th class = 'text-right' width = "10%">Unit Price</th>
						<th class = 'text-right' width = "5%">Quantity</th>
						<th class = 'text-right' width = "10%">Sub Total</th>
					</tr>
				</thead>
				<!--  Cart table to load data on "add to cart" action -->
				<tbody id = "cartTableBody">
				</tbody>
				<tfoot>
					<tr>
						<td class = "text-right">Total:</td>
						<td id = "itemCount" class = "text-right" colspan = "2"></td>
						<td id = "totalAmount" class = "text-right"></td>
					</tr>
				</tfoot>
			</table>
		</div>
		<!-- Product gallery shell to load HTML from JavaScript code -->
		<div id = "product-grid">
			<div class = "txt-heading">
				<h1>Products</h1>
			</div>
			<div id = "product-item-container">
				<div class = "item">
				<% items.map(item => { %>
					<%  const showItemImage = `${item.image.url}${item.image.file}.${item.image.ext}`; %>
					<%  console.log('\n\tcart.ejs:\n\t', showItemImage) %>
					<!--<img src = <%# item.image.url.file.ext %> /> -->
					<img src = <%= showItemImage %> /> 
					<p><%= item.product_id %></p>
					<p><%= item.title %></p>
					<p><%= item.price %></p>
				<% }); %>
				</div>
			</div>
		</div>
	</main>

    <!-- Start of footer -->
    
    <%- include("partials/_footer") %>
    
    <!-- end of footer -->

    <!-- Start of scripts -->
    
    <script src = "js/cart.js" ></script>
    
    <!--End of scripts-->
</body>
</html>
