<div class="product-theme-box">
  @if(product.is_trending || product.is_sale_enable || product.is_featured){
  <div class="label-tag">
    <span
      >{{ (product.is_sale_enable ? 'sale' : product.is_featured ? 'featured' : product.is_trending
      ? 'trending' : '' ) | translate }}
    </span>
    <i class="ri-flashlight-line"></i>
  </div>
  }
  <div class="img-box ratio_50">
    <a
      href="javascript:void(0)"
      [routerLink]="['/product', product.slug]"
      [queryParams]="themeOptionService.isDigitalProductBox ? { layout: 'product_digital' } : {}"
    >
      <img
        [src]="product.product_thumbnail ?
                product.product_thumbnail.original_url : 
                'assets/images/product.png'"
        class="bg-img img-fluid"
        alt
      />
    </a>

    @if(!close()){
    <a
      href="javascript:void(0)"
      class="heart-icon"
      [class.theme-color]="product.is_wishlist"
      (click)="addToWishlist(product)"
    >
      <i class="ri-heart-{{product.is_wishlist ? 'fill' : 'line' }}"></i>
    </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>
    }
  </div>
  <div class="content-box">
    <div class="top-content">
      <a
        [routerLink]="['product', product.slug]"
        [queryParams]="themeOptionService.isDigitalProductBox ? { layout: 'product_digital' } : {}"
      >
        <h5>{{ product.name }}</h5>
      </a>
      <div class="product-rating d-block">
        @if(product.store){
        <h6>
          {{ 'by' | translate }}
          <a [routerLink]="['/seller/store/', product.store.slug]">
            {{ product.store.store_name }}</a
          >
          {{ 'in' | translate }} @if(product.categories.length){
          <a
            [routerLink]="['/collections/']"
            [queryParams]="{ category: product.categories[0].slug }"
            >{{ product.categories[0].name }}</a
          >
          }
        </h6>
        }
        <p>{{ product.short_description }}</p>
        <ngb-rating [rate]="product.rating_count" />
      </div>
    </div>
    <div class="bottom-content">
      <div>
        <span>{{product.orders_count}} {{ 'sales' | translate }}</span>
        <h5 class="price">{{ product.sale_price | currencySymbol }}</h5>
      </div>
      <div class="btn-grp">
        <app-product-cart-button
          [product]="product"
          [text]="''"
          [iconClass]="'ri-shopping-cart-line'"
        />
        <a
          class="btn"
          href="javascrit:(void)"
          [routerLink]="['/product', product.slug]"
          [queryParams]="themeOptionService.isDigitalProductBox ? { layout: 'product_digital' } : {}"
          >{{"preview" | translate}}</a
        >
      </div>
    </div>
  </div>
</div>
