<div class="product-box" [class]="class()">
  @if(product.is_trending || product.is_sale_enable || product.is_featured){
  <div
    class="label-tag"
    [ngClass]="product.is_sale_enable ? 'sale-tag' : product.is_featured ? 'featured-tag' : product.is_trending ? 'trending-tag' : '' "
  >
    <span
      >{{ (product.is_sale_enable ? 'sale' : product.is_featured ? 'featured' : product.is_trending
      ? 'trending' : '' ) | translate }}</span
    >
  </div>
  }
  <div class="product-image">
    <a [routerLink]="['/product/', product.slug]">
      <img
        [src]="product.product_thumbnail ?
                        product.product_thumbnail.original_url :
                        'assets/images/product.png'"
        class="img-fluid"
        [alt]="'product'"
      />
    </a>

    @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>
    } @if(!close()){
    <app-product-hover-action [product]="product" />
    }
  </div>
  <div class="product-detail">
    @if(product.brand){
    <h6 class="brand-name">{{ product.brand.name }}</h6>
    }
    <a [routerLink]="['/product/', product.slug]">
      <h6 class="name">{{ product.name }}</h6>
    </a>
    <p>{{ product.short_description }}</p>

    @if(product.unit){
    <h6 class="unit mb-1">{{ product.unit }}</h6>
    } @if(product.store){
    <h6 class="byers">
      {{ 'By' }}
      <span class="text-title">
        <a [routerLink]="['/seller/store/', product.store.slug]"
          >{{ product.store.store_name }}</a
        ></span
      >
    </h6>
    }
    <h5 class="sold text-content">
      <span class="theme-color price">{{ product.sale_price | currencySymbol }}</span>

      @if(product.discount){
      <del>{{ 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'" />
    </div>
  </div>
</div>
<app-product-detail-modal #productDetailModal [product]="product" />
<app-variation-modal #variationModal />
