<div class="sticky-bottom-cart">
  <div class="container-fluid-lg">
    <div class="row">
      <div class="col-12">
        <div class="cart-content">
          <div class="product-image">
            <img
              [src]="selectedVariation && selectedVariation.variation_image
                                ? selectedVariation.variation_image.original_url
                                : product.product_thumbnail
                                ? product.product_thumbnail.original_url
                                : 'assets/images/product.png'"
              class="img-fluid"
              alt="product"
            />
            <div class="content">
              <h5>{{ selectedVariation ? selectedVariation.name : product.name }}</h5>
              <h6>
                {{ (selectedVariation ? selectedVariation.sale_price : product.sale_price) |
                currencySymbol }} @if(selectedVariation ? selectedVariation.discount :
                product.discount){
                <del class="text-danger">
                  {{ (selectedVariation ? selectedVariation.price : product.price) | currencySymbol
                  }}
                </del>

                <span>
                  {{ (selectedVariation ? selectedVariation.discount : product.discount) }}% {{
                  'off' | translate }}
                </span>
                }
              </h6>
            </div>
          </div>
          <div class="selection-section">
            <div class="form-group mb-0">
              <app-variant-attributes
                [product]="product"
                [attributes]="product.attributes || []"
                [isAllVariantStyleDropdown]="true"
                (selectVariation)="selectVariation($event!)"
              />
            </div>

            @if(!(product && product.is_external)){
            <div class="cart_qty qty-box product-qty m-0">
              <div class="input-group h-100">
                <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>
          <div class="add-btn">
            @if(!(product && product.is_external)){ @if(((selectedVariation &&
            selectedVariation.status && selectedVariation.quantity >= productQty) ||
            (!selectedVariation && product.quantity >= productQty))){
            <app-button
              [id]="'addcartbtnVariationsticky'+product.id"
              [class]="'btn theme-bg-color text-white'"
              (click)="addToCart(product)"
            >
              <i class="ri-shopping-cart-line me-1"></i> {{ 'add_to_cart' | translate }}
            </app-button>
            }@else {
            <app-button
              [class]="'btn theme-bg-color text-white'"
              [id]="'soldoutbtncheckout'"
              [spinner]="false"
              [disabled]="true"
            >
              {{ ((selectedVariation && selectedVariation.status && selectedVariation.quantity <
              productQty || (!selectedVariation && product.quantity < productQty)) ? 'out_of_stock'
              : 'add_to_cart') | translate }}
            </app-button>
            } }@else {
            <app-button
              [id]="'externalBtn'+product.id"
              [class]="'btn theme-bg-color text-white'"
              (click)="externalProductLink(product.external_url)"
            >
              {{ (product.external_button_text ? product.external_button_text : 'buy_now') |
              translate }}
            </app-button>
            }
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
