<article
  class="product-column-with-image border rounded shadow-sm bg-white overflow-hidden d-flex flex-column h-100"
>
  <div class="product-column-with-image__image-container position-relative bg-light">
    @if (imageUrl(); as imageSrc) {
      <img
        [ngSrc]="imageSrc"
        [alt]="title()"
        [priority]="imagePriority()"
        fill
        sizes="(min-width: 1200px) 25vw, (min-width: 768px) 50vw, 100vw"
        class="product-column-with-image__image w-100 h-100 object-fit-cover"
      />
    } @else {
      <div
        class="product-column-with-image__image-placeholder w-100 h-100 d-flex align-items-center justify-content-center bg-light text-muted"
      >
        <i class="fa-solid fa-image fa-2x"></i>
      </div>
    }

    @if (discount() && discount()! > 0) {
      <span
        class="product-column-with-image__discount-badge position-absolute top-0 end-0 bg-primary text-white px-2 py-1"
      >
        -{{ discount() }}%
      </span>
    }
  </div>

  <div
    class="product-column-with-image__body p-3 d-flex flex-column align-items-center text-center flex-grow-1"
  >
    <h3 class="product-column-with-image__title text-uppercase text-black mb-4">
      {{ title() }}
      @if (unavailableMessage(); as message) {
        <app-tooltip [message]="message" />
      }
    </h3>

    <div
      class="product-column-with-image__prices d-flex align-items-center justify-content-center gap-2"
    >
      <span class="product-column-with-image__price-discounted text-primary">
        {{ formattedDiscountedPrice() }}
      </span>

      @if (discount() && discount()! > 0) {
        <span class="product-column-with-image__price-original text-decoration-line-through">
          {{ formattedOriginalPrice() }}
        </span>
      }
    </div>

    <div class="product-column-with-image__price-transfer mb-4">
      <span class="product-column-with-image__price-transfer-value">{{
        formattedTransferPrice()
      }}</span>
      <span class="product-column-with-image__price-transfer-label"> con transferencia</span>
    </div>

    <div class="product-column-with-image__action mt-auto w-100">
      <app-button
        variant="primary"
        class="w-100"
        [disabled]="!!unavailableMessage()"
        (click)="onBuy()"
      >
        {{ buttonText() }}
      </app-button>
    </div>
  </div>
</article>
