<article class="product-vertical-with-cart-card">
  <div class="product-vertical-with-cart-card__content">
    <h3 class="product-vertical-with-cart-card__title">{{ title() }}</h3>

    @if (description()) {
      <p class="product-vertical-with-cart-card__description">{{ description() }}</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" />
      </div>
    } @else if (!hasMultipleVariantSelectors()) {
      <div class="product-vertical-with-cart-card__single-variant">
        <span class="product-vertical-with-cart-card__price">{{ formattedPrice() }}</span>

        <div class="product-vertical-with-cart-card__single-variant-row">
          @for (selector of variantSelectors(); track selector.key) {
            <select
              class="form-select product-vertical-with-cart-card__variant-select"
              [attr.aria-label]="selector.label"
              [ngModel]="selectedValues()[selector.key]"
              (ngModelChange)="onVariantValueChange(selector.key, $event)"
            >
              @for (option of selector.options; track option) {
                <option [ngValue]="option">{{ option }}</option>
              }
            </select>
          }

          <app-quantity-selector [(quantity)]="quantity" />
        </div>
      </div>
    } @else {
      <div class="product-vertical-with-cart-card__multiple-variants">
        <div class="product-vertical-with-cart-card__summary-column">
          <span class="product-vertical-with-cart-card__price">{{ formattedPrice() }}</span>
          <app-quantity-selector [(quantity)]="quantity" />
        </div>

        <div class="product-vertical-with-cart-card__variant-selectors">
          @for (selector of variantSelectors(); track selector.key) {
            <select
              class="form-select product-vertical-with-cart-card__variant-select"
              [attr.aria-label]="selector.label"
              [ngModel]="selectedValues()[selector.key]"
              (ngModelChange)="onVariantValueChange(selector.key, $event)"
            >
              @for (option of selector.options; track option) {
                <option [ngValue]="option">{{ option }}</option>
              }
            </select>
          }
        </div>
      </div>
    }

    <div class="product-vertical-with-cart-card__actions">
      <app-button
        variant="primary"
        [disabled]="hasVariants() && selectedVariant() === null"
        (click)="onBuy()"
      >
        Comprar
      </app-button>
      <app-button
        variant="secondary"
        [disabled]="hasVariants() && selectedVariant() === null"
        (click)="onAddToCart()"
      >
        Agregar al carrito
      </app-button>
    </div>
  </div>
</article>
