< div fxLayout = "column" fxFlex = "100" fxLayoutAlign = "space-between stretch" class = "padding-gap" >
< form fxLayout = "column" fxLayoutAlign = "space-between stretch" fxLayout . gt-sm = "row wrap" # peersForm = "ngForm" >
< mat-form-field fxFlex = "100" fxLayoutAlign = "start end" >
< input matInput placeholder = "Lightning Address (pubkey OR pubkey@ip:port)" name = "peerAddress" [ ( ngModel ) ] = " peerAddress " tabindex = "1" required # peerAdd = "ngModel" >
< / mat-form-field >
< div fxLayout = "row" fxFlex = "100" fxFlex . gt-sm = "30" fxLayoutAlign = "space-between stretch" class = "mt-2" >
< button fxFlex = "48" fxLayoutAlign = "center center" mat-stroked-button color = "primary" tabindex = "2" type = "reset" ( click ) = " resetData ( ) " > Clear Field< / button >
< button fxFlex = "48" fxLayoutAlign = "center center" mat-raised-button color = "primary" [ disabled ] = " peerAdd . invalid " type = "submit" tabindex = "3" ( click ) = " onConnectPeer ( ) " >
< p * ngIf = "peerAdd.invalid && (peerAdd.dirty || peerAdd.touched); else connectText" > Invalid Address< / p >
< ng-template # connectText > < p > Add Peer< / p > < / ng-template >
< / button >
< / div >
< / form >
< div fxLayout = "column" fxLayoutAlign = "start stretch" >
< div fxLayout = "column" fxLayout . gt-xs = "row" fxLayoutAlign . gt-xs = "start center" fxLayoutAlign = "start stretch" class = "padding-gap-x page-sub-title-container mt-2" >
< div fxFlex = "70" >
< fa-icon [ icon ] = " faUsers " class = "page-title-img mr-1" > < / fa-icon >
< span class = "page-title" > Connected Peers< / span >
< / div >
< mat-form-field fxFlex = "30" >
< div fxLayout = "row" fxLayoutAlign = "start start" >
< input matInput ( keyup ) = " applyFilter ( $ event . target . value ) " placeholder = "Filter" >
< / div >
< / mat-form-field >
< / div >
< div perfectScrollbar class = "table-container" >
< mat-progress-bar * ngIf = "flgLoading[0]===true" mode = "indeterminate" > < / mat-progress-bar >
< table mat-table # table [ dataSource ] = " peers " matSort [ ngClass ] = " { ' overflow-auto error-border ' : flgLoading [ 0 ] = = = ' error ' , ' overflow-auto ' : true } " >
< ng-container matColumnDef = "alias" >
< th mat-header-cell * matHeaderCellDef mat-sort-header > Alias < / th >
< td mat-cell * matCellDef = "let peer" > {{peer?.alias}} < / td >
< / ng-container >
< ng-container matColumnDef = "pub_key" >
< th mat-header-cell * matHeaderCellDef mat-sort-header > Pub Key < / th >
< td mat-cell * matCellDef = "let peer" >
< div > {{peer?.pub_key}} < / div >
< / td >
< / ng-container >
< ng-container matColumnDef = "sat_sent" >
< th mat-header-cell * matHeaderCellDef mat-sort-header arrowPosition = "before" >
{{information?.smaller_currency_unit}} Sent < / th >
< td mat-cell * matCellDef = "let peer" > < span fxLayoutAlign = "end center" > {{peer?.sat_sent | number}} < / span > < / td >
< / ng-container >
< ng-container matColumnDef = "sat_recv" >
< th mat-header-cell * matHeaderCellDef mat-sort-header arrowPosition = "before" >
{{information?.smaller_currency_unit}} Recv < / th >
< td mat-cell * matCellDef = "let peer" > < span fxLayoutAlign = "end center" > {{peer?.sat_recv | number}} < / span > < / td >
< / ng-container >
< ng-container matColumnDef = "ping_time" >
< th mat-header-cell * matHeaderCellDef mat-sort-header arrowPosition = "before" > Ping < / th >
< td mat-cell * matCellDef = "let peer" > < span fxLayoutAlign = "end center" > {{peer?.ping_time | number}} < / span >
< / td >
< / ng-container >
< ng-container matColumnDef = "actions" >
< th mat-header-cell * matHeaderCellDef class = "px-3" > < span fxLayoutAlign = "end center" > Actions< / span > < / th >
< td mat-cell * matCellDef = "let peer" fxLayoutAlign = "end center" class = "pl-3" >
< div fxFlex = "100" 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 ) = " onPeerClick ( peer , $ event ) " > View Info< / mat-option >
< mat-option ( click ) = " onOpenChannel ( peer ) " > Open Channel< / mat-option >
< mat-option ( click ) = " onPeerDetach ( peer ) " > Disconnect< / mat-option >
< / mat-select >
< / div >
< / td >
< / ng-container >
< ng-container matColumnDef = "no_peer" >
< td mat-footer-cell * matFooterCellDef colspan = "4" >
< p * ngIf = "!peers.data || peers.data.length<1" > No connected peers.< / p >
< / td >
< / ng-container >
< tr mat-footer-row * matFooterRowDef = "['no_peer']" [ ngClass ] = " { ' display-none ' : peers . data & & peers . data . length > 1}">< / tr >
< tr mat-header-row * matHeaderRowDef = "displayedColumns; sticky: flgSticky;" > < / tr >
< tr mat-row * matRowDef = "let row; columns: displayedColumns;" [ @ newlyAddedRowAnimation ] = " ( row . pub_key = == newlyAddedPeer & & flgAnimate ) ? ' added ' : ' notAdded ' " > < / tr >
< / table >
< / div >
< mat-paginator [ pageSize ] = " pageSize " [ pageSizeOptions ] = " pageSizeOptions " [ showFirstLastButtons ] = " screenSize = == screenSizeEnum . XS ? false : true " class = "mb-4" > < / mat-paginator >
< / div >
< / div >