<div class="flex flex-col gap-3 flex-wrap">
  @if (loading()) {
    @for (_ of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 11, 12, 13, 14, 15]; track $index) {
      <div class="w-100 h-12">
        <p-skeleton width="100%" height="100%"></p-skeleton>
      </div>
    }
  } @else {
    @for (product of products(); track product.id) {
      <div class="flex items-center bg-surface-card rounded-lg p-1 shadow-xs gap-2">
        <div class="grow flex items-center gap-2">
          <img [src]="productPlaceholder" class="w-12 h-12 object-cover rounded-md" />
          <div class="flex flex-col gap-2">
            <span class="text-lg font-bold">
              {{ product.product.name }}
              <small class="text-xs text-muted-color">({{ product.quantity }})</small>
            </span>
            <span class="text-sm text-muted-color">
              {{ product.product.sku }}
            </span>
          </div>
        </div>
        <div class="shrink-0 flex items-center justify-between gap-3">
          <span [appPriceMask]="product.product.salePrice" class="text-base font-bold"></span>
          <button pButton type="button" icon="pi pi-plus" size="small" (click)="addProduct(product.product)"></button>
        </div>
      </div>
    }
  }
</div>
