
    <%- include("partials/_head") %>
	<!-- Font Awesome -->
	<!--Base css styles-->
	<link href = "css/base.css" rel = "stylesheet">
    <!-- Custom css styles-->
    <link href = "css/cart.css" rel = "stylesheet">
	<link href = "images/favicon.png" rel = "icon">

    
    <%- include("partials/_cart-header") %>

    <!-- Start of Main -->
    <main class = "container">
	<!-- Product gallery shell to load HTML from JavaScript code -->
		<div id = "product-grid" class = "product-grid">
			<div class = "txt-heading">
				<h1>Our Products</h1>
			</div>
			<div id = "product-item-container" class = "product-item-container">
				<% items.map(item => { %>
				<div class = "items">
						<%  const showItemImage = `${item.image.url}${item.image.file}.${item.image.ext}`; %>
						<%#  console.log('\n\tImage->cart.ejs:\n\t', showItemImage) %>
						<!--<img src = <%# item.image.url.file.ext %> /> -->
						<div class = 'item-image'>
							<img src = <%= showItemImage %> />
						</div> 
						<div class = 'item-details'>
							<p><%= item.product_id %></p>
							<p><%= item.title %></p>
							<p><%= item.price %></p>
						</div>
				</div>
				<% }); %>
			</div>
		</div>
		
	</main>

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

    <!-- Start of scripts -->
    <script src="https://kit.fontawesome.com/e5bc57b28b.js" crossorigin="anonymous"></script>
    <script src = "js/cart.js" ></script>
    
    <!--End of scripts-->
</body>
</html>
