@if (infoResource.isLoading()) {
  <app-skeleton-loader type="card" [count]="1" />
} @else if (infoResource.error()) {
  <app-error-state (retryAction)="infoResource.reload()" />
} @else {
  <h2 class="row-container space-between">
    <span>Cashier Report</span>
    <span class="spacer"></span>
    <button type="button" mat-icon-button [disabled]="!info().cashier.id" (click)="exportCsv()">
      <mat-icon>save_alt</mat-icon>
    </button>
    <button type="button" mat-icon-button [disabled]="!info().cashier.id" (click)="print()">
      <mat-icon>print</mat-icon>
    </button>
  </h2>

  <form class="flex-col">
    <div class="row-container sm:max-lg:flex-col">
      <mat-form-field class="flex-auto">
        <mat-label>Start Date</mat-label>
        <input
          matInput
          [matDatepicker]="startDate"
          (focus)="startDate.open()"
          [formField]="form.startDate"
          autocomplete="off"
        />
        <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
        <mat-datepicker #startDate></mat-datepicker>
      </mat-form-field>
      <mat-form-field class="flex-auto">
        <mat-label>Finish Date</mat-label>
        <input
          matInput
          [matDatepicker]="finishDate"
          (focus)="finishDate.open()"
          [formField]="form.finishDate"
          autocomplete="off"
        />
        <mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
        <mat-datepicker #finishDate></mat-datepicker>
      </mat-form-field>
    </div>
    <div class="row-container sm:max-lg:flex-col">
      <mat-form-field class="flex-auto basis-4-5">
        <mat-label>Cashier</mat-label>
        <mat-select [formField]="form.cashier">
          <mat-option [value]="null">-- Cashier --</mat-option>
          @for (ac of cashiers(); track ac) {
            <mat-option [value]="ac.id">
              {{ ac.name }}
            </mat-option>
          }
        </mat-select>
      </mat-form-field>
      <button type="button" mat-raised-button class="flex-auto basis-1-5" color="primary" (click)="show()">Show</button>
    </div>
  </form>
  <mat-table #table [dataSource]="dataSource()" aria-label="Elements">
    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
      <mat-cell *matCellDef="let row">{{ row.name }}</mat-cell>
    </ng-container>

    <!-- Amount Column -->
    <ng-container matColumnDef="amount">
      <mat-header-cell *matHeaderCellDef class="right">Amount</mat-header-cell>
      <mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' }}</mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
  </mat-table>
}