<div fxLayout="column" fxLayoutAlign="start stretch" fxFlex="100">
  <div fxLayout="column" fxFlex="9" fxLayoutAlign="end start">
    <span class="dashboard-capacity-header this-channel-capacity">Total Capacity</span>
    <mat-hint class="font-size-90">{{totalLiquidity | number}} Sats</mat-hint>
    <mat-progress-bar class="dashboard-progress-bar this-channel-bar" mode="determinate" color="accent" value="100"></mat-progress-bar>
  </div>
  <div fxLayout="column" fxFlex="3" fxLayoutAlign="end stretch"><mat-divider class="dashboard-divider"></mat-divider></div>
  <div class="channels-capacity-scroll" perfectScrollbar>
    <div fxLayout="column" fxFlex="100" *ngIf="allChannels && allChannels.length > 0; else noChannelBlock">
      <div *ngFor="let channel of allChannels" class="mt-2" fxLayout="column" fxLayoutAlign="start stretch">
        <span class="dashboard-capacity-header" matTooltip="{{channel.remote_alias || channel.remote_pubkey}}" matTooltipDisabled="{{(channel.remote_alias || channel.remote_pubkey).length < 26}}">{{(channel.remote_alias || channel.remote_pubkey) | slice:0:24}}{{(channel.remote_alias || channel.remote_pubkey).length > 25 ? '...' : ''}}</span>
        <div fxLayout="row" fxLayoutAlign="space-between stretch" class="w-100">
          <mat-hint *ngIf="direction === 'In'" fxFlex="100" fxLayoutAlign="start center" class="font-size-90 color-primary"><strong class="font-weight-900 mr-5px">Capacity: </strong>{{channel.remote_balance || 0 | number}} Sats</mat-hint>
          <mat-hint [fxFlex]="showLoop ? '85' : '100'"  *ngIf="direction === 'Out'" fxLayoutAlign="start center" class="font-size-90 color-primary"><strong class="font-weight-900 mr-5px">Capacity: </strong>{{channel.local_balance || 0 | number}} Sats</mat-hint>
          <button *ngIf="showLoop && direction === 'Out'" fxLayout="column" fxLayoutAlign="center end" class="button-link-dashboard" color="primary" fxFlex="15" mat-button aria-label="Loop Out" (click)="onLoopOut(channel)">Loop Out</button>
        </div>
        <mat-progress-bar *ngIf="direction === 'In'" fxFlex="100" class="dashboard-progress-bar" mode="determinate" value="{{(totalLiquidity > 0) ? ((+channel.remote_balance || 0)/(totalLiquidity) * 100) : 0}}"></mat-progress-bar>
        <mat-progress-bar *ngIf="direction === 'Out'" fxFlex="100" class="dashboard-progress-bar" mode="determinate" value="{{(totalLiquidity > 0) ? ((+channel.local_balance || 0)/(totalLiquidity) * 100) : 0}}"></mat-progress-bar>
      </div>
    </div>
  </div>
</div>
<ng-template #noChannelBlock>
  <div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between center" class="mt-1">
    No channels available.
    <button *ngIf="direction === 'Out'" mat-stroked-button color="primary" (click)="goToChannels()" tabindex="1">Open Channel</button>
  </div>
</ng-template>
