<div class="bg-surface-card">
  <app-inner-pages-header [pageTitle]="preparedPageTitle()" [backRoute]="backRoute">
    <ng-template #actions>
      <button pButton icon="pi pi-refresh" type="button" size="small" outlined (click)="refresh()"></button>
    </ng-template>
  </app-inner-pages-header>
</div>
<hr class="mt-0!" />
<div class="flex w-full flex-col flex-wrap gap-3 px-4 py-2">
  @if (loading()) {
    @for (_ of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 11, 12, 13, 14, 15]; track $index) {
      <div class="h-14 w-full">
        <p-skeleton width="100%" height="100%"></p-skeleton>
      </div>
    }
  } @else {
    @for (good of items(); 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 }}
            </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">
          <p-button
            type="button"
            label="ویرایش"
            icon="pi pi-pen-to-square"
            outlined
            size="small"
            [routerLink]="editPageRoute(good.id)"></p-button>
        </div>
      </div>
    }
  }
</div>
