<p-dialog [visible]="true" [closable]="true" (onHide)="cancelled.emit()" [header]="'POS.SELECT_VARIANT' | translate" [style]="{width: '480px'}" [modal]="true">
  <div class="product-name">{{ product().name }}</div>

  <div class="variant-grid">
    @for (variant of product().variants; track variant.id) {
      <div class="variant-card" (click)="selectVariant(variant)">
        <span class="variant-name">{{ variant.name }}</span>
        <span class="variant-price">{{ variant.sale_price }}</span>
        @if (variant.stock_quantity !== undefined) {
          <span class="variant-stock" [class.out-of-stock]="variant.stock_quantity <= 0">
            {{ variant.stock_quantity > 0 ? variant.stock_quantity : ('POS.OUT_OF_STOCK' | translate) }}
          </span>
        }
      </div>
    } @empty {
      <div class="empty-state">
        {{ 'POS.NO_VARIANTS' | translate }}
      </div>
    }
  </div>
</p-dialog>
