< div fxLayout = "row" >
< div fxFlex = "100" >
< mat-card-header fxLayout = "row" fxLayoutAlign = "space-between center" class = "modal-info-header" >
< div fxFlex = "95" fxLayoutAlign = "start start" >
< span class = "page-title" > {{alertTitle}}< / span >
< / div >
< button tabindex = "6" fxFlex = "5" fxLayoutAlign = "center center" class = "btn-close-x p-0" mat-button ( click ) = " onClose ( ) " > X< / button >
< / mat-card-header >
< mat-card-content class = "padding-gap-x-large" >
< form # form = "ngForm" fxLayout = "column" >
< ng-container * ngTemplateOutlet = "nodeDetailsExpansionBlock" > < / ng-container >
< div fxLayout = "column" fxLayoutAlign = "space-between stretch" fxLayoutAlign . gt-sm = "space-between center" fxLayout . gt-sm = "row wrap" >
< mat-form-field fxLayout = "column" fxFlex = "30" fxLayoutAlign = "start end" >
< mat-label > Requested Amount< / mat-label >
< input # ramount = "ngModel" autoFocus matInput type = "number" tabindex = "1" required name = "ramount" [ step ] = " 10000 " [ min ] = " 0 " [ ( ngModel ) ] = " requestedAmount " ( keyup ) = " calculateFee ( ) " >
< span matSuffix > Sats < / span >
< mat-error * ngIf = "ramount.errors?.required" > Requested amount is required.< / mat-error >
< / mat-form-field >
< mat-form-field fxLayout = "column" fxFlex = "30" fxLayoutAlign = "start end" >
< mat-label > Fee Rate< / mat-label >
< input # feeRt = "ngModel" matInput type = "number" tabindex = "2" required name = "feerate" [ step ] = " 10 " [ min ] = " 0 " [ ( ngModel ) ] = " feeRate " ( keyup ) = " calculateFee ( ) " >
< span matSuffix > Sats/vByte < / span >
< mat-error * ngIf = "feeRt.errors?.required" > Fee rate is required.< / mat-error >
< / mat-form-field >
< mat-form-field fxLayout = "column" fxFlex = "30" fxLayoutAlign = "start end" >
< mat-label > Local Amount< / mat-label >
< input # lamount = "ngModel" matInput type = "number" tabindex = "3" required name = "lamount" [ step ] = " 10000 " [ min ] = " 20000 " [ max ] = " totalBalance " [ ( ngModel ) ] = " localAmount " >
< mat-hint > Remaining Bal: {{totalBalance - ((localAmount) ? localAmount : 0) | number}}< / mat-hint >
< span matSuffix > Sats < / span >
< mat-error * ngIf = "lamount.errors?.required" > Local amount is required.< / mat-error >
< mat-error * ngIf = "lamount.errors?.min" > Local amount must be greater than or equal to 20,000 Sats. It's required to cover the channel force close fee, if needed.< / mat-error >
< mat-error * ngIf = "lamount.errors?.max" > Local amount must be less than or equal to {{totalBalance}}.< / mat-error >
< / mat-form-field >
< / div >
< div fxFlex = "100" class = "alert alert-info mt-4" >
< span > Total cost to lease {{node.channel_opening_fee | number}} (Sats)< / span >
< / div >
< div * ngIf = "channelConnectionError !== ''" fxFlex = "100" class = "alert alert-danger mt-2" >
< fa-icon class = "mr-1 alert-icon" [ icon ] = " faExclamationTriangle " > < / fa-icon >
< span * ngIf = "channelConnectionError !== ''" > {{channelConnectionError}}< / span >
< / div >
< div class = "mt-2" fxLayout = "row" fxLayoutAlign = "end center" >
< button mat-button color = "primary" class = "mr-1" tabindex = "4" ( click ) = " resetData ( ) " > Clear< / button >
< button autoFocus mat-button color = "primary" tabindex = "5" ( click ) = " onOpenChannel ( ) " > Execute< / button >
< / div >
< / form >
< / mat-card-content >
< / div >
< / div >
< ng-template # nodeDetailsExpansionBlock >
< mat-expansion-panel * ngIf = "node" class = "flat-expansion-panel mt-1 mb-2" expanded = "false" >
< mat-expansion-panel-header >
< mat-panel-title >
< span > Node: < / span > < strong class = "font-weight-900" > {{node?.alias || node?.nodeid}}< / strong >
< / mat-panel-title >
< / mat-expansion-panel-header >
< div fxLayout = "column" >
< div fxLayout = "row" >
< div fxFlex = "100" >
< h4 fxLayoutAlign = "start" class = "font-bold-500" > Pubkey< / h4 >
< span class = "foreground-secondary-text" > {{node.nodeid}}< / span >
< / div >
< / div >
< mat-divider class = "w-100 my-1" > < / mat-divider >
< div fxLayout = "row" >
< div fxFlex = "100" >
< h4 fxLayoutAlign = "start" class = "font-bold-500" > Last Timestamp< / h4 >
< span class = "overflow-wrap foreground-secondary-text" > {{(node.last_timestamp * 1000) | date:'dd/MMM/y HH:mm'}}< / span >
< / div >
< / div >
< mat-divider class = "w-100 my-1" > < / mat-divider >
< div fxLayout = "column" fxLayoutAlign = "start stretch" >
< h4 fxFlex = "100" class = "font-bold-500 mb-1" > Addresses< / h4 >
< div class = "table-container" >
< table # table mat-table matSort class = "overflow-auto" [ dataSource ] = " node . addresses " >
< ng-container matColumnDef = "type" >
< th * matHeaderCellDef mat-header-cell mat-sort-header > Type< / th >
< td * matCellDef = "let address" mat-cell > {{address?.type}}< / td >
< / ng-container >
< ng-container matColumnDef = "address" >
< th * matHeaderCellDef mat-header-cell mat-sort-header > Address< / th >
< td * matCellDef = "let address" mat-cell > {{address?.address }}< / td >
< / ng-container >
< ng-container matColumnDef = "port" >
< th * matHeaderCellDef mat-header-cell mat-sort-header > Port< / th >
< td * matCellDef = "let address" mat-cell > {{address?.port}}< / td >
< / ng-container >
< tr * matHeaderRowDef = "displayedColumns;" mat-header-row > < / tr >
< tr * matRowDef = "let row; columns: displayedColumns;" mat-row > < / tr >
< / table >
< / div >
< / div >
< / div >
< / mat-expansion-panel >
< / ng-template >