<section
  class="d-flex flex-column overflow-hidden text-secondary cart-shell"
  [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>

    <div class="d-flex align-items-center cart-header-actions">
      @if (
        allowModify() &&
        (!readonly() || showModifyWhenReadonly()) &&
        (requireEditingMode() || modifyAsAction()) &&
        items().length > 0
      ) {
        <button
          class="btn btn-link p-0 border-0 cart-edit-btn"
          type="button"
          [attr.aria-pressed]="modifyAsAction() ? null : editing()"
          [disabled]="editingDisabled()"
          (click)="toggleEditing()"
        >
          {{ !modifyAsAction() && editing() ? 'Listo' : 'Modificar' }}
        </button>
      }

      @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>
      }
    </div>
  </header>

  <div class="d-grid w-100 flex-grow-1 overflow-y-auto cart-items-container">
    @for (
      item of items();
      track item.cartItemId || 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"
        [variants]="item.variants ?? []"
        [selectedVariant]="getItemVariant(item)"
        [quantity]="getItemQuantity(item)"
        [readonly]="readonly()"
        [quantityDisabled]="
          readonly() ||
          !allowUpdateQuantity() ||
          editingDisabled() ||
          (requireEditingMode() && !editing())
        "
        [variantDisabled]="
          readonly() ||
          !allowUpdateVariant() ||
          editingDisabled() ||
          (requireEditingMode() && !editing())
        "
        [removeDisabled]="
          readonly() || !allowDelete() || editingDisabled() || (requireEditingMode() && !editing())
        "
        [allowDelete]="allowDelete()"
        (quantityChange)="onItemQuantityChange(idx, $event)"
        (variantChange)="onItemVariantChange(idx, $event)"
        (remove)="onItemRemove(idx)"
      />
    } @empty {
      <p class="cart-empty-message" role="status">El carrito está vacío</p>
    }
  </div>

  @if (items().length > 0) {
    <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>
