<% layout('layouts/boilerplate.ejs') %>
<link rel="stylesheet" href="/stylesheets/shop.css" />
<div class="container px-5 mb-2">
  <div class="heading">Welcome to Reward Section</div>
</div>
<div class="d-flex justify-content-between flex-wrap align-items-center" style="height: 280px;">
  <% for(let product of products){ %>
  <div
    class="card shadow-lg rounded-3 mb-4 mx-3"
    style="width: 24rem;"
  >
    <img src="<%= product.imgsrc %>" alt="" class="card-img-top rounded-3 shadow-md mb-1"/>
    <div class="d-flex card-footer justify-content-between px-2">
      <div class="h4">
        Points : <span class="h4 text-success"><%= product.points%></span>
      </div>
      <form action="/shop/<%= products[0].id %>" method="post">
        <button class="btn btn-primary px-3 py-2">Buy Now</button>
      </form>
    </div>
  </div>
  <% } %>
</div>
