@if (listResource.isLoading()) {
  <app-skeleton-loader type="table" [count]="5" />
} @else if (listResource.error()) {
  <app-error-state (retryAction)="listResource.reload()" />
} @else {
  <h2>Temporal Products</h2>
  <form class="flex-col">
    <div class="row-container sm:max-lg:flex-col">
      <mat-form-field class="flex-auto basis-2-5">
        <mat-label>Filter</mat-label>
        <input type="text" matInput [formField]="form.filter" autocomplete="off" />
      </mat-form-field>
      <mat-form-field class="flex-auto basis-30">
        <mat-label>Menu Category</mat-label>
        <mat-select [formField]="form.menuCategory">
          <mat-option [value]="null">-- All Products --</mat-option>
          @for (mc of menuCategoriesResource.value(); track mc) {
            <mat-option [value]="mc.id">
              {{ mc.name }}
            </mat-option>
          }
        </mat-select>
      </mat-form-field>
      <mat-form-field class="flex-auto basis-30">
        <mat-label>Sale Category</mat-label>
        <mat-select [formField]="form.saleCategory">
          <mat-option [value]="null">-- All Products --</mat-option>
          @for (mc of saleCategoriesResource.value(); track mc) {
            <mat-option [value]="mc.id">
              {{ mc.name }}
            </mat-option>
          }
        </mat-select>
      </mat-form-field>
    </div>
  </form>
  <mat-table [dataSource]="dataSource()">
    <!-- Name Column -->
    <ng-container matColumnDef="product">
      <mat-header-cell *matHeaderCellDef>Products</mat-header-cell>
      <mat-cell *matCellDef="let row">
        <ul>
          @for (p of row.products; track p) {
            <li>
              <a [routerLink]="['/temporal-products', p.id]">
                <b>{{ p.name }}</b>
              </a>
              <div class="text-sm">
                <b>Valid:</b>
                {{ p.validFrom ?? '&#8734;' }}
                <mat-icon>linear_scale</mat-icon>
                {{ p.validTill ?? '&#8734;' }}
              </div>
            </li>
          }
        </ul>
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="sku">
      <mat-header-cell *matHeaderCellDef>Skus</mat-header-cell>
      <mat-cell *matCellDef="let row">
        <ul>
          @for (s of row.skus; track s) {
            <li>
              {{ s.units }}
            </li>
          }
        </ul>
      </mat-cell>
    </ng-container>

    <!-- Price Column -->
    <ng-container matColumnDef="price">
      <mat-header-cell *matHeaderCellDef class="right">Price</mat-header-cell>
      <mat-cell *matCellDef="let row" class="right">{{ row.skus.at(-1).price | currency: 'INR' }}</mat-cell>
    </ng-container>

    <!-- Menu Category Column -->
    <ng-container matColumnDef="menuCategory">
      <mat-header-cell *matHeaderCellDef>Menu Category</mat-header-cell>
      <mat-cell *matCellDef="let row">{{ row.skus.at(-1).menuCategory.name }}</mat-cell>
    </ng-container>

    <!-- Sale Category Column -->
    <ng-container matColumnDef="saleCategory">
      <mat-header-cell *matHeaderCellDef>Sale Category</mat-header-cell>
      <mat-cell *matCellDef="let row">{{ row.products.at(-1).saleCategory.name }}</mat-cell>
    </ng-container>

    <!-- Info Column -->
    <ng-container matColumnDef="info">
      <mat-header-cell *matHeaderCellDef class="center">Details</mat-header-cell>
      <mat-cell *matCellDef="let row">
        <!-- <ul>
        <li>
          <b>Valid From: {{ row.validFrom ?? '&#8734;' }} </b> <mat-icon>linear_scale</mat-icon>
          <b>Till: {{ row.validTill ?? '&#8734;' }} </b>
        </li>
        <li>
          <mat-icon>
            {{ row.hasHappyHour ? 'sentiment_satisfied_alt' : 'sentiment_dissatisfied' }}
          </mat-icon>
          <b> {{ row.hasHappyHour ? 'Has Happy Hours' : 'No Happy Hours' }}</b>
        </li>
        <li>
          <mat-icon>
            {{ row.isNotAvailable ? 'pause' : 'play_arrow' }}
          </mat-icon>
          <b> {{ row.isNotAvailable ? 'Is not Available' : 'Is Available' }}</b>
        </li>
      </ul> -->
      </mat-cell>
    </ng-container>

    <!-- Quantity Column -->
    <!-- <ng-container matColumnDef="quantity">
    <mat-header-cell *matHeaderCellDef class="right">Quantity</mat-header-cell>
    <mat-cell *matCellDef="let row" class="right">{{ row.quantity | number: '1.2-2' }}</mat-cell>
  </ng-container> -->

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
  </mat-table>
}