@if (settleOptionsResource.isLoading()) {
  <app-skeleton-loader type="card" [count]="1" />
} @else if (settleOptionsResource.error()) {
  <app-error-state (retryAction)="settleOptionsResource.reload()" />
} @else {
  <h2 mat-dialog-title>Receive Payment</h2>
  <mat-dialog-content>
    <form class="flex-col">
      <mat-table #table [dataSource]="dataSource()" [style.visibility]="this.displayTable() ? 'visible' : 'hidden'">
        <!-- Name Column -->
        <ng-container matColumnDef="name">
          <mat-header-cell *matHeaderCellDef class="bold">Amount</mat-header-cell>
          <mat-cell *matCellDef="let row; let i = index" (click)="maxAmount(row, i)">{{ row.name }}</mat-cell>
          <mat-footer-cell *matFooterCellDef class="bold">Balance</mat-footer-cell>
        </ng-container>
        <!-- Amount Column -->
        <ng-container matColumnDef="amount">
          <mat-header-cell *matHeaderCellDef class="center bold" class="flex-auto">{{
            amount | currency: 'INR'
          }}</mat-header-cell>
          <mat-cell *matCellDef="let row; let i = index" class="center flex-auto">
            <mat-form-field>
              <input matInput type="number" [formField]="form.amounts[i].amount" autocomplete="off" />
            </mat-form-field>
          </mat-cell>
          <mat-footer-cell *matFooterCellDef class="bold">{{ balance() | currency: 'INR' }}</mat-footer-cell>
        </ng-container>
        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
        <mat-footer-row *matFooterRowDef="displayedColumns"></mat-footer-row>
      </mat-table>
      <mat-form-field class="flex-auto" [style.visibility]="this.displayReason() ? 'visible' : 'hidden'">
        <mat-label>Reason</mat-label>
        <input
          type="text"
          matInput
          #son
          [formField]="form.son"
          autocomplete="off"
          (focus)="select(son.value) && son.select()"
          (input)="select(son.value)"
        />
      </mat-form-field>
    </form>
  </mat-dialog-content>
  <mat-dialog-actions align="end">
    <button mat-button [mat-dialog-close]>Cancel</button>
    <button type="button" mat-button (click)="accept()" color="primary" [disabled]="!!balance()">Ok</button>
  </mat-dialog-actions>
}