@if (loading()) {
  <shared-page-loading />
} @else if (items()) {
  <div class="h-full w-full max-w-6xl mx-auto flex flex-col items-center justify-center gap-10">
    <p-message severity="warn"> برای ادامه می‌بایست یکی از پایانه‌های زیر را انتخاب کنید. </p-message>
    <div class="grid grid-cols-2 gap-10 items-stretch w-full">
      @for (item of items(); track $index) {
        <p-card
          class="border border-surface-border bg-surface-card rounded-2xl cursor-pointer hover:bg-surface-50! transition-colors"
          (click)="selectPos(item)"
        >
          <div class="flex flex-col gap-2 items-center justify-between shrink-0">
            <i class="pi pi-select text-6xl! mb-3 text-surface-card" aria-hidden="true"></i>
            <span class="text-xl font-semibold mb-2 block"> {{ item.name }} </span>
            <span class="inline-block text-base">
              {{ item.complex.business_activity.name }} - {{ item.complex.name }}
            </span>
            <button pButton class="w-full max-w-xs mx-auto mt-4">انتخاب پایانه</button>
          </div>
        </p-card>
      }
    </div>
  </div>
}