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

    @if (item.imageUrl) {
      <img class="w-100 h-100 object-fit-cover d-block" [src]="item.imageUrl" [alt]="item.title" />
    } @else {
      <div class="w-100 h-100 cart-item-placeholder" aria-hidden="true"></div>
    }
  </div>

  <div class="d-flex flex-column justify-content-between w-100 h-100 py-1 cart-item-content">
    <div class="d-grid cart-item-top-row align-items-start">
      <h3 class="m-0 text-uppercase fw-bold cart-item-product">{{ item.title }}</h3>

      <div class="cart-item-prices">
        @if (item.originalPrice) {
          <span class="text-decoration-line-through cart-item-original-price">$ {{ item.originalPrice }}</span>
        }
        <span class="fw-bold cart-item-discounted-price">$ {{ item.price }}</span>
      </div>
    </div>

    <div
      class="d-grid cart-item-attributes"
      [class.cart-item-attributes--quantity-only]="item.attributes.length === 0"
    >
      <div class="cart-item-attribute">
        <span class="cart-item-attribute-label">Cantidad: </span>
        <span class="fw-bold">{{ item.quantity }} unidad{{ item.quantity === 1 ? '' : 'es' }}</span>
      </div>

      @for (attribute of item.attributes; track attribute.label + attribute.value) {
        <div class="cart-item-attribute">
          <span class="cart-item-attribute-label">{{ attribute.label }}: </span>
          <span class="fw-bold">{{ attribute.value }}</span>
        </div>
      }
    </div>

    @if (item.transferPrice) {
      <div class="cart-item-transfer-price">
        <span class="cart-item-price-label">Precio por transferencia</span>
        <span class="fw-bold">${{ item.transferPrice }}</span>
      </div>
    }
  </div>
</article>
