<div class="card" style="width: 14rem; margin-bottom: 2.5rem; cursor: pointer; padding: 0.4rem;"
  (click)="openProduct(this.product._id)">
  <div *ngIf="productImage; else noImage">
  <img class="card-img-top card-img-bottom" height="210px" width="150px" [src]="productImage" alt="ProductImage">
  </div>
  <ng-template #noImage>
    <div class="no-image">
      <!-- <mat-progress-bar color="accent" mode="indeterminate"></mat-progress-bar> -->
    </div>
  </ng-template>
  <div class="card-body row">
    <div class="col-md-10">
      <h6 class="card-title">
        {{ this.product.name }}
      </h6>
    </div>
    <div class="col-md-2 wishlist">
      <a mat-button class="text wishlistBtn" (click)="addToWishlist($event)" *ngIf="authService.getIsAuth()">
        <i *ngIf="!isInWishlist" class="bi bi-suit-heart"></i>
        <i *ngIf="isInWishlist" class="bi bi-suit-heart-fill"></i>
      </a>
    </div>
    <h6 class="card-subtitle mb-2 text-muted">{{ this.product.description }} </h6>
    <p class="card-text"> Rs. {{ this.product.price }} </p>
  </div>
</div>