<div fxLayout="column" class="mb-2">
  <span class="page-title">Total Limbo Balance: {{pendingChannels.total_limbo_balance | number}} Sats</span>
  <mat-accordion displayMode="flat" class="mt-1">
    <mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
    <mat-expansion-panel fxLayout="column" class="flat-expansion-panel">
      <mat-expansion-panel-header>
        <mat-panel-title>Pending Open ({{pendingOpenChannelsLength}})</mat-panel-title>
      </mat-expansion-panel-header>
      <div [perfectScrollbar] fxLayout="column" fxLayoutAlign="start center" fxFlex="100" class="table-container">
        <mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
        <table mat-table #table fxFlex="100" [dataSource]="pendingOpenChannels" matSort [ngClass]="{'error-border bordered-box': errorMessage !== '','bordered-box': true}">
          <ng-container matColumnDef="remote_alias">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Peer </mat-header-cell>
            <mat-cell *matCellDef="let channel" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '30rem'}">{{channel.channel.remote_alias}}</mat-cell>
          </ng-container>
          <ng-container matColumnDef="commit_fee">
            <mat-header-cell fxLayoutAlign="end center" *matHeaderCellDef mat-sort-header arrowPosition="before">Commit Fee (Sats) </mat-header-cell>
            <mat-cell fxLayoutAlign="end center" *matCellDef="let channel">{{channel.commit_fee | number}}</mat-cell>
          </ng-container>
          <ng-container matColumnDef="commit_weight">
            <mat-header-cell fxLayoutAlign="end center" *matHeaderCellDef mat-sort-header arrowPosition="before">Commit Weight </mat-header-cell>
            <mat-cell fxLayoutAlign="end center" *matCellDef="let channel">{{channel.commit_weight | number}}</mat-cell>
          </ng-container>
          <ng-container matColumnDef="capacity">
            <mat-header-cell fxLayoutAlign="end center" *matHeaderCellDef mat-sort-header arrowPosition="before">Capacity (Sats)</mat-header-cell>
            <mat-cell fxLayoutAlign="end center" *matCellDef="let channel">{{channel.channel.capacity | number}}</mat-cell>
          </ng-container>
          <ng-container matColumnDef="actions">
            <mat-header-cell fxLayoutAlign="end center" class="pl-3 pr-4" *matHeaderCellDef>Actions</mat-header-cell>            
            <mat-cell fxLayoutAlign="end center" *matCellDef="let channel" class="px-3">
              <div class="bordered-box table-actions-select" fxLayoutAlign="center center">
                <mat-select placeholder="Actions" tabindex="1" class="mr-0">
                  <mat-select-trigger></mat-select-trigger>
                  <mat-option (click)="onOpenClick(channel)">View Info</mat-option>
                  <mat-option (click)="onBumpFee(channel)">Bump Fee</mat-option>
                </mat-select>
              </div>
            </mat-cell>
          </ng-container>
          <ng-container matColumnDef="no_pending_open">
            <td mat-footer-cell *matFooterCellDef colspan="4">
              <p *ngIf="(!pendingOpenChannels || !pendingOpenChannels?.data || pendingOpenChannels?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.COMPLETED">No pending channel.</p>
              <p *ngIf="(!pendingOpenChannels || !pendingOpenChannels?.data || pendingOpenChannels?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.INITIATED">Getting pending channels...</p>
              <p *ngIf="(!pendingOpenChannels || !pendingOpenChannels?.data || pendingOpenChannels?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.ERROR">{{errorMessage}}</p>
            </td>
          </ng-container>
          <tr mat-footer-row fxLayoutAlign="start center" *matFooterRowDef="['no_pending_open']" [ngClass]="{'display-none': pendingOpenChannels && pendingOpenChannels?.data && pendingOpenChannels?.data?.length>0}"></tr>
          <mat-header-row *matHeaderRowDef="displayedOpenColumns"></mat-header-row>
          <mat-row fxLayoutAlign="stretch stretch" *matRowDef="let row; columns: displayedOpenColumns;"></mat-row>
        </table>
      </div>            
    </mat-expansion-panel>
    <mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
    <mat-expansion-panel fxLayout="column" class="flat-expansion-panel">
      <mat-expansion-panel-header>
        <mat-panel-title>Pending Force Closing ({{pendingForceClosingChannelsLength}})</mat-panel-title>
      </mat-expansion-panel-header>
      <div [perfectScrollbar] fxLayout="column" fxLayoutAlign="start center" fxFlex="100" class="table-container">
        <table mat-table #table [dataSource]="pendingForceClosingChannels" matSort [ngClass]="{'error-border bordered-box': errorMessage !== '','bordered-box': true}">
          <ng-container matColumnDef="remote_alias">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Peer </mat-header-cell>
            <mat-cell *matCellDef="let channel" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '30rem'}">{{channel.channel.remote_alias}}</mat-cell>
          </ng-container>
          <ng-container matColumnDef="recovered_balance">
            <mat-header-cell fxLayoutAlign="end center" *matHeaderCellDef mat-sort-header arrowPosition="before">Recovered Balance (Sats) </mat-header-cell>
            <mat-cell fxLayoutAlign="end center" *matCellDef="let channel">{{channel.recovered_balance | number}}</mat-cell>
          </ng-container>
          <ng-container matColumnDef="limbo_balance">
            <mat-header-cell fxLayoutAlign="end center" *matHeaderCellDef mat-sort-header arrowPosition="before">Limbo Balance (Sats) </mat-header-cell>
            <mat-cell fxLayoutAlign="end center" *matCellDef="let channel">{{channel.limbo_balance | number}}</mat-cell>
          </ng-container>
          <ng-container matColumnDef="capacity">
            <mat-header-cell fxLayoutAlign="end center" *matHeaderCellDef mat-sort-header arrowPosition="before">Capacity (Sats) </mat-header-cell>
            <mat-cell fxLayoutAlign="end center" *matCellDef="let channel">{{channel.channel.capacity | number}}</mat-cell>
          </ng-container>
          <ng-container matColumnDef="actions">
            <mat-header-cell fxLayoutAlign="end center" class="pl-4 pr-3" *matHeaderCellDef>Actions</mat-header-cell>            
            <mat-cell fxLayoutAlign="end center" *matCellDef="let channel" class="pl-4">
              <button mat-stroked-button color="primary" type="button" tabindex="2" (click)="onForceClosingClick(channel)">View Info</button>          
            </mat-cell>
          </ng-container>
          <ng-container matColumnDef="no_pending_force_closing">
            <td mat-footer-cell *matFooterCellDef colspan="4">
              <p *ngIf="(!pendingForceClosingChannels || !pendingForceClosingChannels?.data || pendingForceClosingChannels?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.COMPLETED">No pending channel.</p>
              <p *ngIf="(!pendingForceClosingChannels || !pendingForceClosingChannels?.data || pendingForceClosingChannels?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.INITIATED">Getting pending channels...</p>
              <p *ngIf="(!pendingForceClosingChannels || !pendingForceClosingChannels?.data || pendingForceClosingChannels?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.ERROR">{{errorMessage}}</p>
            </td>
          </ng-container>
          <tr mat-footer-row fxLayoutAlign="start center" *matFooterRowDef="['no_pending_force_closing']" [ngClass]="{'display-none': pendingForceClosingChannels && pendingForceClosingChannels?.data && pendingForceClosingChannels?.data?.length>0}"></tr>
          <mat-header-row *matHeaderRowDef="displayedForceClosingColumns"></mat-header-row>
          <mat-row fxLayoutAlign="stretch stretch" *matRowDef="let row; columns: displayedForceClosingColumns;"></mat-row>
        </table>
      </div>
    </mat-expansion-panel>
    <mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
    <mat-expansion-panel fxLayout="column" class="flat-expansion-panel">
      <mat-expansion-panel-header>
        <mat-panel-title>Pending Closing ({{pendingClosingChannelsLength}})</mat-panel-title>
      </mat-expansion-panel-header>
      <div [perfectScrollbar] fxLayout="column" fxLayoutAlign="start center" fxFlex="100" class="table-container">
        <table mat-table #table [dataSource]="pendingClosingChannels" matSort
          [ngClass]="{'error-border bordered-box': errorMessage !== '','bordered-box': true}">
          <ng-container matColumnDef="remote_alias">
            <mat-header-cell class="pl-2" *matHeaderCellDef mat-sort-header> Peer </mat-header-cell>
            <mat-cell class="pl-2" *matCellDef="let channel" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '30rem'}">{{channel.channel.remote_alias}}</mat-cell>
          </ng-container>
          <ng-container matColumnDef="local_balance">
            <mat-header-cell fxLayoutAlign="end center" *matHeaderCellDef mat-sort-header arrowPosition="before">
              Local Balance (Sats) </mat-header-cell>
            <mat-cell fxLayoutAlign="end center" *matCellDef="let channel">{{channel.channel.local_balance |
              number}}</mat-cell>
          </ng-container>
          <ng-container matColumnDef="remote_balance">
            <mat-header-cell fxLayoutAlign="end center" *matHeaderCellDef mat-sort-header arrowPosition="before">
              Remote Balance (Sats) </mat-header-cell>
            <mat-cell fxLayoutAlign="end center" *matCellDef="let channel">{{channel.channel.remote_balance |
              number}}</mat-cell>
          </ng-container>
          <ng-container matColumnDef="capacity">
            <mat-header-cell fxLayoutAlign="end center" *matHeaderCellDef mat-sort-header arrowPosition="before">
              Capacity (Sats) </mat-header-cell>
            <mat-cell fxLayoutAlign="end center" *matCellDef="let channel">{{channel.channel.capacity |
                number}}</mat-cell>
          </ng-container>
          <ng-container matColumnDef="actions">
            <mat-header-cell fxLayoutAlign="end center" class="pl-4 pr-3" *matHeaderCellDef>Actions</mat-header-cell>            
            <mat-cell fxLayoutAlign="end center" *matCellDef="let channel" class="pl-4">
              <button mat-stroked-button color="primary" type="button" tabindex="3" (click)="onClosingClick(channel)">View Info</button>          
            </mat-cell>
          </ng-container>
          <ng-container matColumnDef="no_pending_closing">
            <td mat-footer-cell *matFooterCellDef colspan="4">
              <p *ngIf="(!pendingClosingChannels || !pendingClosingChannels?.data || pendingClosingChannels?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.COMPLETED">No pending channel.</p>
              <p *ngIf="(!pendingClosingChannels || !pendingClosingChannels?.data || pendingClosingChannels?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.INITIATED">Getting pending channels...</p>
              <p *ngIf="(!pendingClosingChannels || !pendingClosingChannels?.data || pendingClosingChannels?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.ERROR">{{errorMessage}}</p>
            </td>
          </ng-container>
          <tr mat-footer-row fxLayoutAlign="start center" *matFooterRowDef="['no_pending_closing']" [ngClass]="{'display-none': pendingClosingChannels && pendingClosingChannels?.data && pendingClosingChannels?.data?.length>0}"></tr>
          <mat-header-row *matHeaderRowDef="displayedClosingColumns"></mat-header-row>
          <mat-row fxLayoutAlign="stretch stretch" *matRowDef="let row; columns: displayedClosingColumns;"></mat-row>
        </table>
      </div>
    </mat-expansion-panel>
    <mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
    <mat-expansion-panel fxLayout="column" class="flat-expansion-panel">
      <mat-expansion-panel-header>
        <mat-panel-title>Waiting Close ({{pendingWaitClosingChannelsLength}})</mat-panel-title>
      </mat-expansion-panel-header>
      <div [perfectScrollbar] fxLayout="column" fxLayoutAlign="start center" fxFlex="100" class="table-container">
        <table mat-table #table [dataSource]="pendingWaitClosingChannels" matSort
          [ngClass]="{'error-border bordered-box': errorMessage !== '','bordered-box': true}">
          <ng-container matColumnDef="remote_alias">
            <mat-header-cell class="pl-2" *matHeaderCellDef mat-sort-header> Peer </mat-header-cell>
            <mat-cell class="pl-2" *matCellDef="let channel" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '30rem'}">{{channel.channel.remote_alias}}</mat-cell>
          </ng-container>
          <ng-container matColumnDef="limbo_balance">
            <mat-header-cell fxLayoutAlign="end center" *matHeaderCellDef mat-sort-header arrowPosition="before">
              Limbo Balance (Sats) </mat-header-cell>
            <mat-cell fxLayoutAlign="end center" *matCellDef="let channel">{{channel.limbo_balance | number}}
            </mat-cell>
          </ng-container>
          <ng-container matColumnDef="local_balance">
            <mat-header-cell fxLayoutAlign="end center" *matHeaderCellDef mat-sort-header arrowPosition="before">
              Local Balance (Sats) </mat-header-cell>
            <mat-cell fxLayoutAlign="end center" *matCellDef="let channel">{{channel.channel.local_balance |
              number}}</mat-cell>
          </ng-container>
          <ng-container matColumnDef="remote_balance">
            <mat-header-cell fxLayoutAlign="end center" *matHeaderCellDef mat-sort-header arrowPosition="before">
              Remote Balance (Sats) </mat-header-cell>
            <mat-cell fxLayoutAlign="end center" *matCellDef="let channel">{{channel.channel.remote_balance |
            number}}</mat-cell>
          </ng-container>
          <ng-container matColumnDef="capacity">
            <mat-header-cell fxLayoutAlign="end center" *matHeaderCellDef mat-sort-header arrowPosition="before">
              Capacity (Sats) </mat-header-cell>
            <mat-cell fxLayoutAlign="end center" *matCellDef="let channel">{{channel.channel.capacity |
              number}}</mat-cell>
          </ng-container>
          <ng-container matColumnDef="actions">
            <mat-header-cell fxLayoutAlign="end center" class="pl-4 pr-3" *matHeaderCellDef>Actions</mat-header-cell>            
            <mat-cell fxLayoutAlign="end center" *matCellDef="let channel" class="pl-4">
              <button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onWaitClosingClick(channel)">View Info</button>          
            </mat-cell>
          </ng-container>
          <ng-container matColumnDef="no_pending_wait_closing">
            <td mat-footer-cell *matFooterCellDef colspan="4">
              <p *ngIf="(!pendingWaitClosingChannels || !pendingWaitClosingChannels?.data || pendingWaitClosingChannels?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.COMPLETED">No pending channel.</p>
              <p *ngIf="(!pendingWaitClosingChannels || !pendingWaitClosingChannels?.data || pendingWaitClosingChannels?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.INITIATED">Getting pending channels...</p>
              <p *ngIf="(!pendingWaitClosingChannels || !pendingWaitClosingChannels?.data || pendingWaitClosingChannels?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.ERROR">{{errorMessage}}</p>
            </td>
          </ng-container>
          <tr mat-footer-row fxLayoutAlign="start center" *matFooterRowDef="['no_pending_wait_closing']" [ngClass]="{'py-0': true, 'display-none': pendingWaitClosingChannels && pendingWaitClosingChannels?.data && pendingWaitClosingChannels?.data?.length>0}"></tr>
          <mat-header-row *matHeaderRowDef="displayedWaitClosingColumns"></mat-header-row>
          <mat-row fxLayoutAlign="stretch stretch" *matRowDef="let row; columns: displayedWaitClosingColumns;"></mat-row>
        </table>
      </div>
    </mat-expansion-panel>
  </mat-accordion>
</div>