<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Our Products</title>
  <link rel="icon" href="../../icons/logo-icon.png">
  <link rel="stylesheet" href="../../styles/general-body.css">  
  <link rel="stylesheet" href="../../styles/products-style.css"> 
  <link rel="stylesheet" href="../../styles/header-footer.css">  
</head>

<body>
  <header>
    <%- include('../partials/header') %>

  <main>
    <section>
      <h2>Our Products</h2>
      <div class="product-list">
        <% products.forEach(p => { %>
          <div class="product" id="product<%= p.id %>"">
            <h3><%= p.name %></h3>
            <a href="../../product?id=<%= p.id %>">
                <img src="../../images/small/<%- p.imageSmall %>" alt=<%= p.imageAlt %> width="150">
            </a>
            <p><%= p.desc %></p>
          </div>
        <% }); %>
      </div>
    </section>
  </main>

  <%- include('../partials/footer') %>
  
</body>
</html>