<%- include('../includes/head.ejs') %>
  <link rel="stylesheet" href="/css/product.css">
</head>

<body>
  <%- include('../includes/navigation.ejs') %>

  <main>
    <% if (prods.length > 0) { %>
      <div class="grid">
        <% for (let product of prods) { %>
          <article class="card product-item">
            <header class="card__header">
              <h1 class="product__title">
                <%= product.title %>
              </h1>
            </header>
            <div class="card__image">
              <img src="<%= product.imageUrl %>" alt="<%= product.title %>">
            </div>
            <div class="card__content">
              <h2 class="product__price">$
                <%= product.price %>
              </h2>
              <p class="product__description">
                <%= product.description %>
              </p>
            </div>
            <div class="card__actions">
              <a href="/products/<%= product.id %>" class="btn">Details</a>
              <%- include('../includes/add-to-cart.ejs', {product: product}) %>
            </div>
          </article>
        <% } %>
      </div>
    <% } else { %>
      <h1>No Products Found!</h1>
    <% } %>
  </main>
<%- include('../includes/end.ejs') %>