<div class="product-row-card">
  <!-- Left Side: Title and Description -->
  <div class="product-row-card__info d-flex flex-column justify-content-center flex-grow-1">
    <h3 class="product-row-card__title text-uppercase mb-1 m-0">
      {{ title() }}
      @if (effectiveUnavailableMessage(); as message) {
        <app-tooltip [message]="message" />
      }
    </h3>
    @if (effectiveDescription()) {
      <p class="product-row-card__description m-0 mt-1">
        {{ effectiveDescription() }}
      </p>
    }
  </div>

  <!-- Right Side: Selectors and quantity first, then price -->
  <div class="product-row-card__actions">
    <div class="product-row-card__summary">
      <div class="product-row-card__controls">
        <app-variant-selector
          class="product-row-card__selectors"
          [variants]="variants()"
          [(selectedVariant)]="selectedVariant"
        />

        <app-quantity-selector
          [(quantity)]="quantity"
          [max]="effectiveMaximum()"
          [disabled]="unavailable()"
        />
      </div>

      <span class="product-row-card__price text-primary">
        {{ formattedPrice() }}
      </span>
    </div>

    <div class="product-row-card__buttons">
      <div class="product-row-card__btn-wrapper">
        <app-button variant="primary" [disabled]="unavailable()" (click)="onBuy()">
          Comprar
        </app-button>
      </div>
      <div class="product-row-card__btn-wrapper">
        <app-button
          variant="secondary"
          [disabled]="saving() || unavailable()"
          (click)="onAddToCart()"
        >
          {{ saving() ? 'Guardando' : 'Agregar al carrito' }}
        </app-button>
      </div>
    </div>
  </div>
</div>
