<div class="product-style-2">
  <div class="product-image">
    <div class="label-flex">
      @if(product.discount){
      <div class="discount">
        <label>{{ product.discount }}%</label>
      </div>
      }
      <button class="btn p-0 wishlist btn-wishlist notifi-wishlist">
        <i class="iconly-Heart icli"></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>

    @if(!close()){
    <app-product-hover-action [product]="product" />
    } @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">
    @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>
    <div class="product-rating mb-2">
      <ngb-rating [rate]="product.rating_count" />
      @if(product.rating_count){
      <h6 class="rating-number">
        ( {{ product.rating_count.toFixed(2) || 0 }} {{'ratings' | translate}})
      </h6>
      }
    </div>
    <div class="product-bottom">
      <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="add-to-cart-box">
        <app-product-cart-button [product]="product" [text]="'add'" />
      </div>
    </div>
  </div>
</div>
