@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>Bill Settlement Report</span>
    <button type="button" mat-icon-button (click)="exportCsv()">
      <mat-icon>save_alt</mat-icon>
    </button>
  </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>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 basis-2-5">
        <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>
      <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">
    <!-- Date Column -->
    <ng-container matColumnDef="date">
      <mat-header-cell *matHeaderCellDef>Time</mat-header-cell>
      <mat-cell *matCellDef="let row">{{ row.date | localTime }}</mat-cell>
    </ng-container>

    <!-- Bill ID Column -->
    <ng-container matColumnDef="billId">
      <mat-header-cell *matHeaderCellDef class="right">Bill ID</mat-header-cell>
      <mat-cell *matCellDef="let row" class="right">{{ row.billId }}</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 | number: '1.2-2' }}</mat-cell>
    </ng-container>

    <!-- Settlement Column -->
    <ng-container matColumnDef="settlement">
      <mat-header-cell *matHeaderCellDef class="right">Settlement</mat-header-cell>
      <mat-cell *matCellDef="let row" class="right">{{ row.settlement }}</mat-cell>
    </ng-container>

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