<div class="flex flex-col flex-wrap gap-3">
  @if (loading()) {
    @for (_ of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 11, 12, 13, 14, 15]; track $index) {
      <div class="h-12 w-100">
        <p-skeleton width="100%" height="100%"></p-skeleton>
      </div>
    }
  } @else {
    @for (good of visibleGoods(); track good.id) {
      <div class="bg-surface-card flex items-center gap-2 rounded-lg px-3 py-1 shadow-xs">
        <div class="flex grow items-center gap-2">
          <img
            [src]="good.image_url || goodPlaceholder"
            loading="lazy"
            decoding="async"
            class="h-12 w-12 rounded-md object-cover" />
          <div class="flex flex-col gap-2">
            <span class="text-base font-bold">
              {{ good.name }}
              @if (!good.is_default_guild_good) {
                <small class="text-muted-color text-xs">*</small>
              }
            </span>
            <span class="text-muted-color text-sm">
              {{ good.sku.code }}
            </span>
          </div>
        </div>
        <div class="flex shrink-0 items-center justify-between gap-1">
          <pos-good-favorite-cta [isFavorite]="good.is_favorite" [id]="good.id" size="small" />
          <button pButton type="button" label="انتخاب" class="w-28" size="small" (click)="addGood(good)"></button>
        </div>
      </div>
    }
    @if (hasMore()) {
      <button pButton type="button" outlined class="mx-auto" (click)="loadMore()">نمایش کالاهای بیشتر</button>
    }
  }
</div>
