< div fxLayout = "column" class = "padding-gap" >
< div fxLayout = "column" fxLayout . gt-xs = "row" fxLayoutAlign . gt-xs = "start center" fxLayoutAlign = "start stretch" class = "page-sub-title-container" >
< div fxFlex = "70" > < / div >
< div fxFlex . gt-xs = "30" fxLayoutAlign . gt-xs = "space-between center" fxLayout = "row" fxLayoutAlign = "space-between stretch" >
< mat-form-field fxLayout = "column" fxFlex = "49" >
< mat-label > Filter By< / mat-label >
< mat-select tabindex = "1" name = "filterBy" [ ( ngModel ) ] = " selFilterBy " ( selectionChange ) = " selFilter = '' ; applyFilter ( ) " >
< perfect-scrollbar > < mat-option * ngFor = "let column of ['all'].concat(displayedColumns.slice(0, -1))" [ value ] = " column " > {{getLabel(column)}}< / mat-option > < / perfect-scrollbar >
< / mat-select >
< / mat-form-field >
< mat-form-field fxLayout = "column" fxFlex = "49" >
< mat-label > Filter< / mat-label >
< input matInput name = "filter" [ ( ngModel ) ] = " selFilter " ( input ) = " applyFilter ( ) " ( keyup ) = " applyFilter ( ) " >
< / mat-form-field >
< / div >
< / div >
< div fxLayout = "column" fxFlex = "100" class = "table-container" [ perfectScrollbar ] >
< mat-progress-bar * ngIf = "apiCallStatus.status === apiCallStatusEnum.INITIATED" mode = "indeterminate" > < / mat-progress-bar >
< table # table mat-table fxFlex = "100" matSort [ matSortActive ] = " tableSetting . sortBy " [ matSortDirection ] = " tableSetting . sortOrder " [ dataSource ] = " channels " [ ngClass ] = " { ' error-border ' : errorMessage ! = = ' ' } " >
<!-- Channel Group Row Start -->
< ng-container matColumnDef = "amount" >
< th * matHeaderCellDef mat-header-cell mat-sort-header > Amount (Sats)< / th >
< td * matCellDef = "let channel" mat-cell >
< span fxLayoutAlign = "start center" class = "htlc-row-span" >
Active HTLCs: {{channel?.pending_htlcs?.length}}
< / span >
< ng-container * ngIf = "channel.is_expanded" >
< span * ngFor = "let htlc of channel?.pending_htlcs; index as i" fxLayoutAlign = "end center" class = "htlc-row-span" >
{{htlc?.amount | number}}
< / span >
< / ng-container >
< / td >
< / ng-container >
< ng-container matColumnDef = "incoming" >
< th * matHeaderCellDef mat-header-cell mat-sort-header > Alias/Incoming< / th >
< td * matCellDef = "let channel" mat-cell >
< span fxLayoutAlign = "start center" class = "htlc-row-span" > {{channel?.remote_alias}}< / span >
< ng-container * ngIf = "channel.is_expanded" >
< span * ngFor = "let htlc of channel?.pending_htlcs" fxLayoutAlign = "start center" class = "htlc-row-span" >
{{htlc?.incoming ? 'Yes' : 'No'}}
< / span >
< / ng-container >
< / td >
< / ng-container >
< ng-container matColumnDef = "forwarding_channel" >
< th * matHeaderCellDef mat-header-cell mat-sort-header > Forwarding Channel< / th >
< td * matCellDef = "let channel" mat-cell >
< span fxLayoutAlign = "start center" class = "htlc-row-span" > {{' '}}< / span >
< ng-container * ngIf = "channel.is_expanded" >
< span * ngFor = "let htlc of channel?.pending_htlcs" fxLayoutAlign = "start center" class = "htlc-row-span" >
{{htlc?.forwarding_channel}}
< / span >
< / ng-container >
< / td >
< / ng-container >
< ng-container matColumnDef = "htlc_index" >
< th * matHeaderCellDef mat-header-cell mat-sort-header arrowPosition = "before" >
< span fxLayoutAlign = "end center" class = "htlc-row-span" > HTLC Index< / span >
< / th >
< td * matCellDef = "let channel" mat-cell >
< span fxLayoutAlign = "end center" class = "htlc-row-span" > {{' '}}< / span >
< span * ngIf = "channel.is_expanded" >
< span * ngFor = "let htlc of channel?.pending_htlcs" fxLayoutAlign = "end center" class = "htlc-row-span" >
{{htlc?.htlc_index | number}}
< / span >
< / span >
< / td >
< / ng-container >
< ng-container matColumnDef = "forwarding_htlc_index" >
< th * matHeaderCellDef mat-header-cell mat-sort-header arrowPosition = "before" >
< span fxLayoutAlign = "end center" class = "htlc-row-span" > Forwarding HTLC Index< / span >
< / th >
< td * matCellDef = "let channel" mat-cell >
< span fxLayoutAlign = "end center" class = "htlc-row-span" > {{' '}}< / span >
< span * ngIf = "channel.is_expanded" >
< span * ngFor = "let htlc of channel?.pending_htlcs" fxLayoutAlign = "end center" class = "htlc-row-span" >
{{htlc?.forwarding_htlc_index | number}}
< / span >
< / span >
< / td >
< / ng-container >
< ng-container matColumnDef = "expiration_height" >
< th * matHeaderCellDef mat-header-cell mat-sort-header arrowPosition = "before" >
< span fxLayoutAlign = "end center" class = "htlc-row-span" > Expiration Height< / span >
< / th >
< td * matCellDef = "let channel" mat-cell >
< span fxLayoutAlign = "end center" class = "htlc-row-span" > {{' '}}< / span >
< span * ngIf = "channel.is_expanded" >
< span * ngFor = "let htlc of channel?.pending_htlcs" fxLayoutAlign = "end center" class = "htlc-row-span" >
{{htlc?.expiration_height | number:'1.0-0'}}
< / span >
< / span >
< / td >
< / ng-container >
< ng-container matColumnDef = "hash_lock" >
< th * matHeaderCellDef mat-header-cell mat-sort-header arrowPosition = "before" class = "pl-3 htlc-row-span" >
< span fxLayoutAlign = "end center" class = "htlc-row-span" > Hash Lock< / span >
< / th >
< td * matCellDef = "let channel" mat-cell class = "pl-3" >
< span fxLayoutAlign = "end center" class = "htlc-row-span" > {{' '}}< / span >
< span * ngIf = "channel.is_expanded" >
< span * ngFor = "let htlc of channel?.pending_htlcs" fxLayoutAlign = "end center" class = "htlc-row-span" >
{{htlc?.hash_lock}}
< / span >
< / span >
< / td >
< / ng-container >
< ng-container matColumnDef = "actions" >
< th * matHeaderCellDef mat-header-cell class = "px-2" >
< div class = "bordered-box table-actions-select" fxLayoutAlign = "end center" >
< mat-select placeholder = "Actions" tabindex = "1" class = "mr-0" >
< mat-select-trigger > < / mat-select-trigger >
< mat-option ( click ) = " onDownloadCSV ( ) " > Download CSV< / mat-option >
< / mat-select >
< / div >
< / th >
< td * matCellDef = "let channel" mat-cell class = "px-2" fxLayout = "column" fxLayoutAlign = "center end" >
< span fxLayoutAlign = "end center" class = "htlc-group-head" >
< button mat-flat-button class = "btn-htlc-expand" color = "primary" type = "button" tabindex = "5" ( click ) = " channel . is_expanded = !channel.is_expanded" > {{channel.is_expanded ? 'Hide' : 'Show'}}< / button >
< / span >
< div * ngIf = "channel.is_expanded" >
< div * ngFor = "let htlc of channel?.pending_htlcs; index as i" class = "htlc-group-details" fxLayoutAlign = "end center" >
< button mat-stroked-button class = "btn-htlc-info" color = "primary" type = "button" tabindex = "6" ( click ) = " onHTLCClick ( htlc , channel ) " > View {{i + 1}}< / button >
< / div >
< / div >
< / td >
< / ng-container >
< ng-container matColumnDef = "no_channel" >
< td * matFooterCellDef mat-footer-cell colspan = "4" >
< p * ngIf = "(!channels?.data || channels?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.COMPLETED" > No active htlc available.< / p >
< p * ngIf = "(!channels?.data || channels?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.INITIATED" > Getting active htlcs...< / p >
< p * ngIf = "(!channels?.data || channels?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.ERROR" > {{errorMessage}}< / p >
< / td >
< / ng-container >
<!-- channel Group Row End -->
< tr * matFooterRowDef = "['no_channel']" mat-footer-row [ ngClass ] = " { ' display-none ' : channels ? . data & & channels ? . data ? . length > 0}">< / tr >
< tr * matHeaderRowDef = "displayedColumns" mat-header-row > < / tr >
< tr * matRowDef = "let row; columns: displayedColumns;" mat-row > < / tr >
< / table >
< / div >
< mat-paginator class = "mb-1" [ pageSize ] = " pageSize " [ pageSizeOptions ] = " pageSizeOptions " [ showFirstLastButtons ] = " screenSize = == screenSizeEnum . XS ? false : true " > < / mat-paginator >
< / div >