@if (listResource.isLoading()) {
  <app-skeleton-loader type="table" [count]="5" />
} @else if (listResource.error()) {
  <app-error-state (retryAction)="listResource.reload()" />
} @else {
  <h2 class="row-container space-between">
    <span>Guest List</span>
    <a mat-button [routerLink]="['/guest-book', 'new']" [queryParams]="{ t: 'booking' }">
      <mat-icon>add_box</mat-icon>
      Table Booking
    </a>
    <a mat-button [routerLink]="['/guest-book', 'new']" [queryParams]="{ t: 'walk_in' }">
      <mat-icon>add_box</mat-icon>
      Walk-in
    </a>
  </h2>

  <form class="flex-col">
    <div class="row-container">
      <mat-form-field class="flex-auto">
        <mat-label>Date</mat-label>
        <input matInput [matDatepicker]="date" (focus)="date.open()" [formField]="form.date" autocomplete="off" />
        <mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
        <mat-datepicker #date></mat-datepicker>
      </mat-form-field>
    </div>
  </form>
  <mat-table [dataSource]="dataSource()" aria-label="Elements">
    <!-- SNo Column -->
    <ng-container matColumnDef="sno">
      <mat-header-cell *matHeaderCellDef>S. No / Total</mat-header-cell>
      <mat-cell *matCellDef="let row">{{ row.serial }} / {{ row.count }}</mat-cell>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
      <mat-cell *matCellDef="let row"
        ><a [routerLink]="['/guest-book/', row.id]">{{ row.name }}</a></mat-cell
      >
    </ng-container>

    <!-- Phone Column -->
    <ng-container matColumnDef="phone">
      <mat-header-cell *matHeaderCellDef>Phone</mat-header-cell>
      <mat-cell *matCellDef="let row">{{ row.phone }}</mat-cell>
    </ng-container>

    <!-- Pax Column -->
    <ng-container matColumnDef="pax">
      <mat-header-cell *matHeaderCellDef>Pax</mat-header-cell>
      <mat-cell *matCellDef="let row">{{ row.pax }}</mat-cell>
    </ng-container>

    <!-- Time Column -->
    <ng-container matColumnDef="date">
      <mat-header-cell *matHeaderCellDef>Time</mat-header-cell>
      <mat-cell *matCellDef="let row">{{ row.bookingDate | localTime }} // {{ row.arrivalDate | localTime }}</mat-cell>
    </ng-container>

    <!-- Action Column -->
    <ng-container matColumnDef="action">
      <mat-header-cell *matHeaderCellDef class="center">Action</mat-header-cell>
      <mat-cell *matCellDef="let row" class="center">
        @if (row.status === 'old' || (!row.tableId && !row.voucherId)) {
          <button mat-icon-button [routerLink]="['/sales']" [queryParams]="{ guest: row.id }">
            <mat-icon>chair</mat-icon>
          </button>
        }
        @if (row.tableId) {
          <button
            mat-stroked-button
            color="primary"
            [routerLink]="['/sales', 'bill']"
            [queryParams]="{ table: row.tableId, voucher: row.voucherId }"
          >
            {{ row.tableName }}
          </button>
        }
        <!-- <button
              mat-stroked-button
              color="primary"
              [routerLink]="['/sales', 'bill']"
              [queryParams]="{ voucher: row.voucherId }"
              *ngIf="!row.tableId && row.voucherId"
              >
              {{ row.tableName }}
            </button> -->
      </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row
      *matRowDef="let row; columns: displayedColumns"
      [class.grey300]="row.status === 'booking'"
      [class.accent]="row.status === 'running'"
      [class.strong-accent]="row.status === 'printed'"
    ></mat-row>
  </mat-table>
}