<div class="card h-100 shadow-sm">
  <img src="{{product.pictureUrl}}" alt="{{product.name}}" class="img-fluid bg-light">
  <div class="card-body d-flex flex-column">
    <a routerLink="/shop/{{product.id}}">
      <h6 class="text-uppercase">{{product.name}}</h6>
    </a>
    <span class="mb-2">{{product.price | currency}}</span>
      <div class="btn-group mt-auto">
        <button type="button" class="btn btn-sm btn-outline-secondary fa fa-shopping-cart me-2"></button>
        <button routerLink="/shop/{{product.id}}" type="button" class="btn btn-sm btn-outline-secondary">View</button>
      </div>
  </div>
</div>
