@if (listResource.isLoading()) {
  <app-skeleton-loader type="table" [count]="5" />
} @else if (listResource.error()) {
  <app-error-state (retryAction)="listResource.reload()" />
} @else {
  <h2>Running Tables</h2>

  <div class="tables-grid">
    @for (table of list(); track table) {
      <mat-card
        class="flex-col square-button"
        matRipple
        (click)="navigateToBill(table)"
        [class.primary]="table.status !== 'running' && table.status !== 'printed'"
        [class.accent]="table.status === 'running'"
        [class.strong-accent]="table.status === 'printed'"
      >
        <h3>{{ table.name }}</h3>
        <span>{{ table.guest }}</span>
        <span>{{ table.pax ?? '-' }} / {{ table.seats }} / {{ table.section?.name }}</span>
        @if (table.date) {
          <span>{{ table.date }}</span>
        }
        @if (table.amount) {
          <span>{{ table.amount | currency: 'INR' }}</span>
        }
      </mat-card>
    }
    <mat-card class="flex-col square-button strong-primary" matRipple (click)="openBill()">
      <h3>Open Bill</h3>
    </mat-card>
  </div>
}