<div class="product-list row align-items-center justify-content-center">
  <% locals.products.forEach( product => { %>
    <div class="product col-12 col-md-6 text-center">
      <div class="product-image" style="width:255px;height:255px;margin:auto;">
        <% if (product.featured) { %>
          <img class="featured" src="<%= locals.linkTo('uploads', product.featured.id) %>?format=small_square" alt="" style="max-width:100%;">
        <% } else if (product.uploads && product.uploads.length > 0) { %>
          <img class="featured featured-auto" src="<%= locals.linkTo('uploads', product.uploads[0].id) %>?format=small_square" alt="" style="max-width:100%;">
        <% } %>
      </div>
      <div class="product-inner">
        <div class="product-name pt-1">
            <h4>
              <a href="<%= locals.linkTo('products', product._id) %>"><%- product.name %></a>
            </h4>
        </div>
        <div class="product-price p-2">
            <%- product.price %> <%= locals.config.currency.symbol %>
        </div>
        <div class="product-add-cart">
            <form action="/cart/products/<%= product._id %>" method="POST">
              <input type="hidden" name="_csrf" value="<%= locals.csrf %>">
              <input class="btn btn-outline-primary" type="submit" value="Add to cart" <%= product.stock < 1 ? 'disabled' : '' %>>
            </form>
        </div>
      </div>
    </div>
  <% }) %><!-- end product.forEach -->
</div>