<div class="product-style-1">
  <div class="product-image">
    <div class="label-flex">
      @if(product.discount){
      <div class="discount">
        <label>{{ product.discount }}%</label>
      </div>
      } @if(!close()){
      <button
        class="btn p-0 wishlist btn-wishlist notifi-wishlist"
        (click)="addToWishlist(product)"
      >
        <i
          class="ri-heart-{{product.is_wishlist ? 'fill' : 'line' }}"
          [class.theme-color]="product.is_wishlist"
        ></i>
      </button>
      }
    </div>
    <a [routerLink]="['/product/', product.slug]">
      <img
        [src]="product.product_thumbnail ?
                 product.product_thumbnail.original_url :
                 'assets/images/product.png'"
        class="img-fluid"
        [alt]="product.name"
      />
    </a>
    <!-- 3 action ( wishlist, compare, view ) -->
    @if(!close()){
    <app-product-hover-action [product]="product" [hideAction]="['wishlist']" />
    } @if(close()){
    <div class="product-header-top">
      <app-button
        [class]="'btn wishlist-button close_button'"
        [spinner]="false"
        [id]="'close_btn'"
        (click)="removeWishlist(product.id)"
      >
        <i class="ri-close-line"></i>
      </app-button>
    </div>
    }
  </div>
  <div class="product-detail">
    <a [routerLink]="['/product/', product.slug]">
      <h6 class="name">{{ product.name }}</h6>
    </a>
    <p>{{ product.short_description }}</p>
    <h5 class="sold text-content">
      <span class="theme-color price">{{ product.sale_price | currencySymbol }}</span>
      @if(product.discount){
      <del class="ms-1">{{ product.price | currencySymbol }}</del>
      }
    </h5>
    <div class="product-rating">
      <ngb-rating [rate]="product.rating_count" />
      @if(product.stock_status === 'in_stock'){
      <h6 class="theme-color">{{ product.stock_status | titleCase }}</h6>
      }
    </div>
    <div class="add-to-cart-box">
      <app-product-cart-button [product]="product" [text]="'add_to_cart'" />
    </div>
  </div>
</div>
