@if(product){ @if((option?.product?.encourage_order && product.encourage_order) ||
(option?.product?.encourage_view && product.encourage_view)){
<div class="product-count">
  <ul>
    @if(option?.product?.encourage_order && product.encourage_order){
    <li>
      <i class="ri-flashlight-line"></i>
      <h6 class="lang">{{ ordersCount }} {{ 'customers_ordered' | translate }}</h6>
    </li>
    } @if(option?.product?.encourage_view && product.encourage_view){
    <li>
      <i class="ri-eye-line"></i>
      <h6 class="lang">{{ viewsCount }} {{ 'active_view_in_this_item' | translate }}</h6>
    </li>
    }
  </ul>
</div>
}
<h2 class="name">{{ selectedVariation ? selectedVariation.name : product.name }}</h2>

<ul class="product-brand-box">
  @if(product && product.brand){
  <li class="brand-box-suggestion">
    {{ 'brand' | translate}}:
    <a [routerLink]="['/brand', product.brand.slug]">{{ product.brand.name }}</a>
  </li>
  } @if(product && product.authors?.length){
  <li class="brand-box-suggestion">
    {{ 'author' | translate }}: @for(author of product.authors; track author) {
    <a [routerLink]="['/author', author.slug]">{{ author.author_name }}</a>
    }
  </li>
  } @if(product && product.publication){
  <li class="brand-box-suggestion">
    {{ 'publication' | translate }}:
    <a [routerLink]="['/publication', product.publication.slug]"
      >{{ product.publication.publisher_name }}</a
    >
  </li>
  }
</ul>
<div class="price-rating">
  <h3 class="theme-color price">
    {{ (selectedVariation ? selectedVariation.sale_price : product.sale_price) | currencySymbol }}
    @if(selectedVariation ? selectedVariation.discount : product.discount){
    <del class="text-content">
      {{ (selectedVariation ? selectedVariation.price : product.price) | currencySymbol }}
    </del>
    <span class="offer-top">
      {{ (selectedVariation ? selectedVariation.discount : product.discount) }}% {{ 'off' |
      translate }}
    </span>
    }
  </h3>

  @if(!(product && product.is_external)){
  <div class="product-rating custom-rate">
    <ngb-rating [rate]="product.rating_count" />
    <span class="review">{{ product.reviews_count }} {{ 'review' | translate }}</span>
  </div>
  }
</div>

@if(product.short_description){
<div class="product-contain">
  <p [innerHTML]="product.short_description"></p>
  @if(product && product.read_document ){
  <app-button
    [class]="'btn btn-md read-btn mt-3'"
    (click)="openDocument(product.read_document.original_url!)"
  >
    {{product.read_button_text || 'read'}}
  </app-button>
  }
</div>
} @if(product && product.status){
<div class="product-package">
  <app-variant-attributes
    [product]="product"
    [attributes]="product.attributes || []"
    (selectVariation)="selectVariation($event!)"
    [owlCar]="owlCar()"
  />
</div>

@if(product.sale_starts_at && product.sale_expired_at){
<app-sale-timer
  [startDate]="product.sale_starts_at"
  [endDate]="product.sale_expired_at"
  [title]="'hurry_up_sales_ends_in'"
/>
} @if(product.wholesales && product.wholesales.length){
<app-product-wholesale [product]="product" />
<h4>
  {{ 'Total Price:' | translate }}
  <span class="theme-color">{{ totalPrice | currencySymbol }}</span>
</h4>
} @if(!(product && product.is_external)){
<div class="note-box product-package">
  <div class="cart_qty qty-box product-qty">
    <div class="input-group">
      <app-button
        [class]="'btn qty-left-minus'"
        [id]="'add-to-cart'+product.id"
        [spinner]="false"
        (click)="updateQuantity(-1)"
      >
        <i class="ri-subtract-fill"></i>
      </app-button>
      <input
        class="form-control input-number qty-input"
        type="text"
        name="quantity"
        value="{{productQty}}"
        readonly
      />
      <app-button
        [class]="'btn qty-left-minus'"
        [id]="'qty-left-minus'+product.id"
        [spinner]="false"
        (click)="updateQuantity(1)"
      >
        <i class="ri-add-line"></i>
      </app-button>
    </div>
  </div>
  <div class="wishlist-btn-group">
    <a href="javascript:void(0)" class="wishlist-button btn" (click)="addToWishlist(product)">
      <i
        class="ri-heart-{{product.is_wishlist ? 'fill' : 'line' }}"
        [class.theme-color]="product.is_wishlist"
      ></i>
    </a>
    <app-button
      [class]="'wishlist-button btn'"
      [id]="'compare_btn'"
      [spinner]="false"
      (click)="addToCompare(product.id)"
    >
      <i class="ri-refresh-line"></i>
    </app-button>
  </div>
</div>
}

<div class="dynamic-checkout">
  @if(!(product && product.is_external)){ @if(((selectedVariation && selectedVariation.status &&
  selectedVariation.quantity >= productQty) || (!selectedVariation && product.quantity >=
  productQty))){
  <app-button
    [id]="'addcartbtnVariation'+product.id"
    [class]="'btn btn-md bg-theme scroll-button'"
    (click)="addToCart(product)"
  >
    <i class="ri-shopping-cart-line me-1"></i> {{ 'add_to_cart' | translate }}
  </app-button>
  }@else {
  <app-button
    [class]="'btn btn-md bg-theme scroll-button disabled'"
    [id]="'soldoutbtnproductcontain'"
    [spinner]="false"
    [disabled]="true"
  >
    @if(((selectedVariation && selectedVariation.status && selectedVariation.quantity >= productQty)
    || (!selectedVariation && product.quantity >= productQty))){
    <i class="ri-shopping-cart-line me-1"></i>
    } {{ ((selectedVariation && selectedVariation.status && selectedVariation.quantity < productQty
    || (!selectedVariation && product.quantity < productQty)) ? 'out_of_stock' : 'add_to_cart') |
    translate }}
  </app-button>
  }
  <app-button
    [class]="'btn btn-md border-theme-color'"
    [id]="'buynowbtn'+product.id"
    [disabled]="((selectedVariation && selectedVariation.status && selectedVariation.quantity >= productQty) || (!selectedVariation && product.quantity >= productQty)) ? false : true"
    (click)="((selectedVariation && selectedVariation.status && selectedVariation.quantity >= productQty) || (!selectedVariation && product.quantity >= productQty)) && addToCart(product, true)"
  >
    {{ 'buy_now' | translate }}
  </app-button>
  }@else {
  <app-button
    [id]="'externalBtn'+product.id"
    [class]="'btn btn-md bg-theme scroll-button'"
    (click)="externalProductLink(product.external_url)"
  >
    {{ product.external_button_text ? product.external_button_text : 'buy_now' | translate }}
  </app-button>
  }
</div>
} @if(!(product && product.status)){
<div class="not-available">{{ 'currently_item_unavailable' | translate }}</div>
} }