@if(crossSellProducts && crossSellProducts.length){
<div class="related-product bundle-sec">
  <div class="product-title-2">
    <h4>{{ 'frequently_bought_together' | translate }}</h4>
  </div>
  <div class="related-box">
    <div class="related-image">
      <ul>
        @for(crossSellProduct of crossSellProducts; track crossSellProduct){
        <li>
          <div class="product-box product-box-bg">
            <div class="product-image">
              <a [routerLink]="['/product/', crossSellProduct.slug]">
                <img
                  [src]="crossSellProduct.product_thumbnail ?
                                              crossSellProduct.product_thumbnail.original_url :
                                              'assets/images/product.png'"
                  class="img-fluid"
                  [alt]="crossSellProduct.name"
                />
              </a>
            </div>
            <div class="product-detail">
              <a [routerLink]="['/product/', crossSellProduct.slug]">
                <h6 class="name">{{ crossSellProduct.name }}</h6>
              </a>
              <h5 class="sold text-content">
                <span class="theme-color price"
                  >{{ crossSellProduct.sale_price | currencySymbol }}</span
                >

                @if(crossSellProduct.discount){
                <del>{{ crossSellProduct.price | currencySymbol }}</del>
                }
              </h5>
            </div>
          </div>
        </li>
        }
      </ul>
    </div>

    <div class="budle-list">
      <ul>
        @for(crossSellProduct of crossSellProducts; track crossSellProduct){
        <li>
          <div class="form-check">
            <input
              class="checkbox_animated"
              type="checkbox"
              value="{{crossSellProduct.id}}"
              id="crosssell-{{crossSellProduct.id}}"
              (change)="select($event)"
            />
            <label class="form-check-label" for="crosssell-{{crossSellProduct.id}}">
              <span class="color color-1">
                {{ crossSellProduct.name }}
                <span>{{ crossSellProduct.sale_price | currencySymbol }}</span>
              </span>
            </label>
          </div>
        </li>
        }
        <li class="contant">
          <h5>{{ 'product_selected_for' | translate }}</h5>
          <h4 class="theme-color">{{ total | currencySymbol }}</h4>
          <app-button
            [iconClass]="'ri-shopping-cart-line'"
            [id]="'addcartAllbtn'"
            [class]="'btn text-white theme-bg-color btn-md mt-sm-4 mt-3 fw-bold'"
            [disabled]="!total"
            (click)="addToCartAll()"
          >
            {{ 'add_all_to_cart' | translate }}
          </app-button>
        </li>
      </ul>
    </div>
  </div>
</div>
}