@if (listResource.isLoading()) {
  <app-skeleton-loader type="table" [count]="5" />
} @else if (listResource.error()) {
  <app-error-state (retryAction)="listResource.reload()" />
} @else {
  <div class="tables-grid">
    <mat-card
      class="flex-col square-button warn"
      matRipple
      [routerLink]="['../../menu-categories']"
      queryParamsHandling="preserve"
    >
      <h3>Back</h3>
    </mat-card>
    @for (item of list(); track item) {
      <mat-card
        class="flex-col square-button"
        matRipple
        (click)="addSku(item)"
        [class.accent]="item.hasHappyHour"
        [class.disabled]="item.isNotAvailable"
        [class.primary]="!item.hasHappyHour && !item.isNotAvailable"
      >
        <h3>{{ item.name }}</h3>
        <span>{{ item.price | currency: 'INR' }}</span>
      </mat-card>
    }
  </div>
}