< div fxLayout = "column" >
< div fxLayout = "column" fxLayout . gt-xs = "row" fxLayoutAlign . gt-xs = "start center" fxLayoutAlign = "start stretch" class = "page-sub-title-container" >
< div fxFlex = "70" > < / div >
< mat-form-field fxFlex = "30" >
< input matInput ( keyup ) = " applyFilter ( ) " [ ( ngModel ) ] = " selFilter " name = "filter" placeholder = "Filter" >
< / mat-form-field >
< / div >
< mat-progress-bar * ngIf = "apiCallStatus.status === apiCallStatusEnum.INITIATED" mode = "indeterminate" > < / mat-progress-bar >
< div [ perfectScrollbar ] fxLayout = "row" fxLayoutAlign = "start center" fxFlex = "100" class = "table-container w-100" >
< table mat-table # table [ dataSource ] = " channels " matSort [ ngClass ] = " { ' overflow-auto error-border ' : errorMessage ! = = ' ' , ' overflow-auto ' : true } " >
< ng-container matColumnDef = "private" >
< th mat-header-cell * matHeaderCellDef mat-sort-header > < / th >
< td mat-cell * matCellDef = "let channel" >
< span * ngIf = "channel.private" class = "mr-1" matTooltip = "Private" matTooltipPosition = "right" > < fa-icon [ icon ] = " faEyeSlash " > < / fa-icon > < / span >
< span * ngIf = "!channel.private" class = "mr-1" matTooltip = "Public" matTooltipPosition = "right" > < fa-icon [ icon ] = " faEye " > < / fa-icon > < / span >
< / td >
< / ng-container >
< ng-container matColumnDef = "short_channel_id" >
< th mat-header-cell * matHeaderCellDef mat-sort-header class = "pl-1" > Short Channel ID < / th >
< td mat-cell * matCellDef = "let channel" class = "pl-1" >
< div class = "ellipsis-parent" [ ngStyle ] = " { ' max-width ' : ( screenSize = == screenSizeEnum . XS ) ? ' 12rem ' : ' 22rem ' } " >
< span class = "ellipsis-child" > {{channel?.short_channel_id}}< / span >
< / div >
< / td >
< / ng-container >
< ng-container matColumnDef = "alias" >
< th mat-header-cell * matHeaderCellDef mat-sort-header class = "pl-1" > Alias < / th >
< td mat-cell * matCellDef = "let channel" class = "pl-1" >
< div class = "ellipsis-parent" [ ngStyle ] = " { ' max-width ' : ( screenSize = == screenSizeEnum . XS ) ? ' 12rem ' : ' 22rem ' } " >
< span class = "ellipsis-child" > {{channel?.alias}}< / span >
< / div >
< / td >
< / ng-container >
< ng-container matColumnDef = "id" >
< th mat-header-cell * matHeaderCellDef mat-sort-header class = "pl-1" > Id < / th >
< td mat-cell * matCellDef = "let channel" class = "pl-1" >
< div class = "ellipsis-parent" [ ngStyle ] = " { ' max-width ' : ( screenSize = == screenSizeEnum . XS ) ? ' 12rem ' : ' 22rem ' } " >
< span class = "ellipsis-child" > {{channel?.id}}< / span >
< / div >
< / td >
< / ng-container >
< ng-container matColumnDef = "channel_id" >
< th mat-header-cell * matHeaderCellDef mat-sort-header class = "pl-1" > Channel Id < / th >
< td mat-cell * matCellDef = "let channel" class = "pl-1" >
< div class = "ellipsis-parent" [ ngStyle ] = " { ' max-width ' : ( screenSize = == screenSizeEnum . XS ) ? ' 12rem ' : ' 22rem ' } " >
< span class = "ellipsis-child" > {{channel?.channel_id}}< / span >
< / div >
< / td >
< / ng-container >
< ng-container matColumnDef = "funding_txid" >
< th mat-header-cell * matHeaderCellDef mat-sort-header class = "pl-1" > Funding Transaction Id < / th >
< td mat-cell * matCellDef = "let channel" class = "pl-1" >
< div class = "ellipsis-parent" [ ngStyle ] = " { ' max-width ' : ( screenSize = == screenSizeEnum . XS ) ? ' 12rem ' : ' 22rem ' } " >
< span class = "ellipsis-child" > {{channel?.funding_txid}}< / span >
< / div >
< / td >
< / ng-container >
< ng-container matColumnDef = "connected" >
< th mat-header-cell * matHeaderCellDef mat-sort-header class = "pl-1" > Connected < / th >
< td mat-cell * matCellDef = "let channel" class = "pl-1" > {{(channel?.connected) ? 'Connected' : 'Disconnected'}} < / td >
< / ng-container >
< ng-container matColumnDef = "our_channel_reserve_satoshis" >
< th mat-header-cell * matHeaderCellDef mat-sort-header arrowPosition = "before" class = "pl-1" > Local Reserve (Sats) < / th >
< td mat-cell * matCellDef = "let channel" class = "pl-1" > < span fxLayoutAlign = "end center" >
{{channel?.our_channel_reserve_satoshis | number:'1.0-0'}} < / span > < / td >
< / ng-container >
< ng-container matColumnDef = "their_channel_reserve_satoshis" >
< th mat-header-cell * matHeaderCellDef mat-sort-header arrowPosition = "before" class = "pl-1" > Remote Reserve (Sats) < / th >
< td mat-cell * matCellDef = "let channel" class = "pl-1" > < span fxLayoutAlign = "end center" >
{{channel?.their_channel_reserve_satoshis | number:'1.0-0'}} < / span > < / td >
< / ng-container >
< ng-container matColumnDef = "msatoshi_total" >
< th mat-header-cell * matHeaderCellDef mat-sort-header arrowPosition = "before" class = "pl-1" > Total (Sats) < / th >
< td mat-cell * matCellDef = "let channel" class = "pl-1" > < span fxLayoutAlign = "end center" >
{{channel?.msatoshi_total/1000 | number:channel?.msatoshi_to_us < 1000 ? ' 1 . 0-4 ' : ' 1 . 0-0 ' } } < / span > < / td >
< / ng-container >
< ng-container matColumnDef = "spendable_msatoshi" >
< th mat-header-cell * matHeaderCellDef mat-sort-header arrowPosition = "before" class = "pl-1" > Spendable (Sats) < / th >
< td mat-cell * matCellDef = "let channel" class = "pl-1" > < span fxLayoutAlign = "end center" >
{{channel?.spendable_msatoshi/1000 | number:channel?.msatoshi_to_us < 1000 ? ' 1 . 0-4 ' : ' 1 . 0-0 ' } } < / span > < / td >
< / ng-container >
< ng-container matColumnDef = "msatoshi_to_us" >
< th mat-header-cell * matHeaderCellDef mat-sort-header arrowPosition = "before" class = "pl-1" > Local Balance (Sats) < / th >
< td mat-cell * matCellDef = "let channel" class = "pl-1" > < span fxLayoutAlign = "end center" >
{{channel?.msatoshi_to_us/1000 | number:channel?.msatoshi_to_us < 1000 ? ' 1 . 0-4 ' : ' 1 . 0-0 ' } } < / span > < / td >
< / ng-container >
< ng-container matColumnDef = "msatoshi_to_them" >
< th mat-header-cell * matHeaderCellDef mat-sort-header arrowPosition = "before" class = "pl-1" > Remote Balance (Sats) < / th >
< td mat-cell * matCellDef = "let channel" class = "pl-1" > < span fxLayoutAlign = "end center" >
{{channel?.msatoshi_to_them/1000 | number:channel?.msatoshi_to_them < 1000 ? ' 1 . 0-4 ' : ' 1 . 0-0 ' } } < / span > < / td >
< / ng-container >
< ng-container matColumnDef = "balancedness" >
< th mat-header-cell * matHeaderCellDef mat-sort-header class = "pl-2" > Balance Score < / th >
< td mat-cell * matCellDef = "let channel" class = "pl-2" >
< div fxLayout = "row" >
< mat-hint fxFlex = "100" fxLayoutAlign = "center center" class = "font-size-80" > {{channel.balancedness || 0 | number}}< / mat-hint >
< / div >
< mat-progress-bar mode = "determinate" value = "{{channel.msatoshi_to_us && channel.msatoshi_to_us > 0 ? ((+channel.msatoshi_to_us/((+channel.msatoshi_to_us)+(+channel.msatoshi_to_them)))*100) : 0}}" > < / mat-progress-bar >
< / td >
< / ng-container >
< ng-container matColumnDef = "actions" >
< th mat-header-cell * matHeaderCellDef class = "pl-1" >
< 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 ) = " onChannelUpdate ( ' all ' ) " > Update Fee Policy< / mat-option >
< mat-option ( click ) = " onDownloadCSV ( ) " > Download CSV< / mat-option >
< / mat-select >
< / div >
< / th >
< td mat-cell * matCellDef = "let channel" fxLayoutAlign = "end center" class = "pl-1" >
< div class = "bordered-box table-actions-select" fxLayoutAlign = "center center" >
< mat-select placeholder = "Actions" tabindex = "2" class = "mr-0" >
< mat-select-trigger > < / mat-select-trigger >
< mat-option ( click ) = " onChannelClick ( channel , $ event ) " > View Info< / mat-option >
< mat-option ( click ) = " onViewRemotePolicy ( channel ) " > View Remote Fee< / mat-option >
< mat-option ( click ) = " onChannelUpdate ( channel ) " > Update Fee Policy< / mat-option >
< mat-option ( click ) = " onChannelClose ( channel ) " > Close Channel< / mat-option >
< / mat-select >
< / div >
< / td >
< / ng-container >
< ng-container matColumnDef = "no_peer" >
< td mat-footer-cell * matFooterCellDef colspan = "4" >
< p * ngIf = "numPeers<1 && (!channels?.data || channels?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.COMPLETED" > No peers connected. Add a peer in order to open a channel.< / p >
< p * ngIf = "numPeers>0 && (!channels?.data || channels?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.COMPLETED" > No channel available.< / p >
< p * ngIf = "(!channels?.data || channels?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.INITIATED" > Getting channels...< / p >
< p * ngIf = "(!channels?.data || channels?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.ERROR" > {{errorMessage}}< / p >
< / td >
< / ng-container >
< tr mat-footer-row * matFooterRowDef = "['no_peer']" [ ngClass ] = " { ' display-none ' : numPeers > 0 & & channels?.data & & channels?.data?.length>0}">< / tr >
< tr mat-header-row * matHeaderRowDef = "displayedColumns" > < / tr >
< tr mat-row * matRowDef = "let row; columns: displayedColumns;" > < / tr >
< / table >
< / div >
< mat-paginator [ pageSize ] = " pageSize " [ pageSizeOptions ] = " pageSizeOptions " [ showFirstLastButtons ] = " screenSize = == screenSizeEnum . XS ? false : true " class = "mb-1" > < / mat-paginator >
< / div >