Â«<!DOCTYPE html>
<html lang="es">
  <!-- Include Head -->
  <%- include('partials/head', {title: 'Todos los productos'}) %>
  <body>
    <!-- Header -->
    <%- include('partials/headerNavbar') %>
    <!-- /Header -->

    <!-- todos los productos -->
    <div class="container products-wrapper">
      <div class="row">
        <div class="col-12">
          <h2 class="products-title">Todos los productos</h2>
        </div>

        <% products.forEach(function(product) { %>
        <div class="col-12 col-sm-6 col-lg-3">
          <section class="product-box">
            <a href="/products/detail/<%= product.id %>">
              <figure class="product-box_image">
                <img
                  src="/images/products/<%= product.image ? product.image: 'default-image.png' %>"
                  alt="imagen de producto"
                />
              </figure>
              <article class="product-box_data">
                <h2>$FINAL PRICE <%= product.price %></h2>
                <span>DISCOUNT% OFF <%= product.discount %></span>
                <p><%= product.name %></p>
                <i class="fas fa-truck"></i>
              </article>
            </a>
          </section>
        </div>
        <% }) %>
      </div>
    </div>
    <!-- /todos los productos -->

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