<article class="product-vertical-with-cart-card">
  <div class="product-vertical-with-cart-card__content">
    <h3 class="product-vertical-with-cart-card__title">
      {{ title() }}
      @if (effectiveUnavailableMessage(); as message) {
        <app-tooltip [message]="message" />
      }
    </h3>

    @if (effectiveDescription()) {
      <p class="product-vertical-with-cart-card__description">{{ effectiveDescription() }}</p>
    }
  </div>

  <div class="product-vertical-with-cart-card__purchase">
    @if (!hasVariants()) {
      <div class="product-vertical-with-cart-card__summary">
        <span class="product-vertical-with-cart-card__price">{{ formattedPrice() }}</span>
        <app-quantity-selector
          [(quantity)]="quantity"
          [max]="effectiveMaximum()"
          [disabled]="unavailable()"
        />
      </div>
    } @else {
      <div class="product-vertical-with-cart-card__variants">
        <div class="product-vertical-with-cart-card__summary">
          <span class="product-vertical-with-cart-card__price">{{ formattedPrice() }}</span>
          <app-quantity-selector
            [(quantity)]="quantity"
            [max]="effectiveMaximum()"
            [disabled]="unavailable()"
          />
        </div>

        <div class="product-vertical-with-cart-card__variant-selectors">
          <app-variant-selector [variants]="variants()" [(selectedVariant)]="selectedVariant" />
        </div>
      </div>
    }

    <div class="product-vertical-with-cart-card__actions">
      <app-button
        variant="primary"
        [disabled]="unavailable() || (hasVariants() && selectedVariant() === null)"
        (click)="onBuy()"
      >
        Comprar
      </app-button>
      <app-button
        variant="secondary"
        [disabled]="saving() || unavailable() || (hasVariants() && selectedVariant() === null)"
        (click)="onAddToCart()"
      >
        {{ saving() ? 'Guardando' : 'Agregar al carrito' }}
      </app-button>
    </div>
  </div>
</article>
