<section class="d-flex flex-column h-100 overflow-hidden text-secondary" [style.background-color]="backgroundColor()">
  <header class="d-flex align-items-center p-3 justify-content-between bg-transparent cart-header">
    <h2 class="m-0 text-uppercase fw-bold cart-title">{{ title() }}</h2>

    @if (showClose()) {
      <button class="btn btn-link p-0 border-0 d-inline-flex align-items-center justify-content-center cart-close-btn" type="button" aria-label="Cerrar carrito" (click)="closed.emit()">
        <i class="fa-solid fa-xmark"></i>
      </button>
    }
  </header>

  <div class="d-grid w-100 flex-grow-1 overflow-y-auto cart-items-container">
    @for (item of items(); track item.productVariantId || item.product + item.discountedPrice; let idx = $index) {
      <app-cart-item
        [imageUrl]="item.imageUrl"
        [product]="item.product"
        [originalPrice]="item.originalPrice"
        [discountedPrice]="item.discountedPrice"
        [discountPercentage]="item.discountPercentage"
        [attributes]="item.attributes"
        [quantity]="getItemQuantity(item)"
        (quantityChange)="onItemQuantityChange(idx, $event)"
        (remove)="onItemRemove(idx)"
      />
    }
  </div>

  <footer class="d-grid gap-1 bg-transparent cart-footer">
    <div class="d-flex align-items-baseline justify-content-between gap-3">
      <span class="cart-summary-text-muted">Subtotal:</span>
      <span class="cart-summary-text-muted-bold">{{ formattedSubtotal() }}</span>
    </div>

    <div class="d-flex align-items-baseline justify-content-between gap-3">
      <span class="cart-summary-text-muted">Descuento:</span>
      <span class="cart-summary-text-muted-bold">{{ formattedDiscount() }}</span>
    </div>

    <div class="d-flex align-items-baseline justify-content-between gap-3 mt-1">
      <span class="cart-total-text">TOTAL:</span>
      <span class="cart-total-text">{{ formattedTotal() }}</span>
    </div>

    <div class="cart-actions mt-3">
      <ng-content />
    </div>
  </footer>
</section>



