<article class="w-100 p-3 rounded-0 cart-item" [class.cart-item-with-media]="imageUrl()">
  @if (imageUrl()) {
    <div class="position-relative overflow-hidden cart-item-media">
      @if (discountPercentage() && discountPercentage()! > 0) {
        <span class="position-absolute top-0 start-0 z-1 rounded-0 cart-item-discount-badge"
          >-{{ discountPercentage() }}%</span
        >
      }

      <img class="w-100 h-100 object-fit-cover d-block" [src]="imageUrl()" [alt]="product()" />
    </div>
  }

  <div class="d-grid min-w-0 cart-item-content">
    <div class="d-grid align-items-start cart-item-top-row">
      <h3 class="m-0 text-uppercase fw-normal cart-item-product">{{ product() }}</h3>

      <div class="text-nowrap cart-item-prices">
        @if (formattedOriginalPrice(); as originalPrice) {
          <span class="text-decoration-line-through mb-1 fw-light cart-item-original-price">{{
            originalPrice
          }}</span>
        }

        <span class="fw-bold cart-item-discounted-price">{{ formattedDiscountedPrice() }}</span>
      </div>
    </div>

    @if (hasVariantSelectors() && !variantDisabled()) {
      <app-variant-selector
        class="cart-item-variant-selector"
        [variants]="variants()"
        [selectedVariant]="selectedVariant()"
        [compact]="true"
        (selectedVariantChange)="onVariantChange($event)"
      />
    } @else {
      <div class="d-grid cart-item-attributes">
        @for (attribute of attributes(); track attribute.label + attribute.value) {
          <div class="cart-item-attribute">
            <span class="fw-normal cart-item-attribute-label">{{ attribute.label }}: </span>
            <span class="fw-bold">{{ attribute.value }}</span>
          </div>
        }
      </div>
    }

    @if (!readonly()) {
      <div class="d-flex justify-content-end align-items-center mt-auto cart-item-actions">
        <app-quantity-selector
          size="small"
          [quantity]="quantity()"
          [disabled]="quantityDisabled()"
          (quantityChange)="onQuantityChange($event)"
          (increase)="onIncrease()"
          (decrease)="onDecrease()"
        />
        @if (!removeDisabled() && allowDelete()) {
          <app-icon-button variant="trash" class="cart-item-remove-btn" (click)="onRemove()" />
        }
      </div>
    }
  </div>
</article>
