@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]="['../']" queryParamsHandling="preserve">
      <h3>Back</h3>
    </mat-card>
    @for (item of list(); track item) {
      <mat-card
        class="primary flex-col square-button"
        matRipple
        [routerLink]="['../products', item.id]"
        queryParamsHandling="preserve"
      >
        <h3>{{ item.name }}</h3>
      </mat-card>
    }
  </div>
}