< div fxLayout = "row" >
< div fxFlex = "100" class = "padding-gap-large" >
< 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 = "8" fxFlex = "5" fxLayoutAlign = "center" class = "btn-close-x p-0" ( click ) = " onClose ( ) " mat-button > X< / button >
< / mat-card-header >
< mat-card-content class = "mt-5px" >
< form fxLayout = "column" ( submit ) = " onOpenChannel ( ) " ( reset ) = " resetData ( ) " # form = "ngForm" >
< div fxLayout = "column" >
< mat-form-field fxFlex = "100" * ngIf = "!peer && peers && peers.length > 0" >
< input type = "text" placeholder = "Peer Alias" aria-label = "Peers" matInput [ formControl ] = " selectedPeer " ( change ) = " onSelectedPeerChanged ( ) " [ matAutocomplete ] = " auto " tabindex = "1" required >
< mat-autocomplete # auto = "matAutocomplete" [ displayWith ] = " displayFn " ( optionSelected ) = " onSelectedPeerChanged ( ) " >
< mat-option * ngFor = "let peer of filteredPeers | async" [ value ] = " peer " > {{peer.alias ? peer.alias : peer.id ? peer.id : ''}}< / mat-option >
< / mat-autocomplete >
< mat-error * ngIf = "selectedPeer.errors?.required" > Peer alias is required.< / mat-error >
< mat-error * ngIf = "selectedPeer.errors?.notfound" > Peer not found in the list.< / mat-error >
< / mat-form-field >
< / div >
< ng-container * ngTemplateOutlet = "peerDetailsExpansionBlock" > < / ng-container >
< ng-container * ngTemplateOutlet = "openChannelBlock" > < / ng-container >
< div fxFlex = "100" class = "alert alert-danger mt-1" * ngIf = "channelConnectionError !== ''" >
< fa-icon [ icon ] = " faExclamationTriangle " class = "mr-1 alert-icon" > < / fa-icon >
< span * ngIf = "channelConnectionError !== ''" > {{channelConnectionError}}< / span >
< / div >
< div class = "mt-2" fxLayout = "row" fxLayoutAlign = "end center" >
< button mat-stroked-button color = "primary" class = "mr-1" tabindex = "7" type = "reset" > Clear Fields< / button >
< button autoFocus mat-flat-button color = "primary" type = "submit" tabindex = "9" > Open Channel< / button >
< / div >
< / form >
< / mat-card-content >
< / div >
< / div >
< ng-template # peerDetailsExpansionBlock >
< mat-expansion-panel class = "flat-expansion-panel my-1" * ngIf = "peer" expanded = "false" >
< mat-expansion-panel-header >
< mat-panel-title >
< span > Peer: < / span > < strong class = "font-weight-900" > {{peer?.alias || peer?.id}}< / 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" > {{peer.id}}< / span >
< / div >
< / div >
< mat-divider class = "w-100 my-1" > < / mat-divider >
< div fxLayout = "row" >
< div fxFlex = "50" >
< h4 fxLayoutAlign = "start" class = "font-bold-500" > Address< / h4 >
< span class = "overflow-wrap foreground-secondary-text" > {{peer?.netaddr}}< / span >
< / div >
< div fxFlex = "50" >
< h4 fxLayoutAlign = "start" class = "font-bold-500" > Connected< / h4 >
< span class = "overflow-wrap foreground-secondary-text" > {{peer.connected ? 'True' : 'False'}}< / span >
< / div >
< / div >
< / div >
< / mat-expansion-panel >
< / ng-template >
< ng-template # openChannelBlock >
< form fxLayout = "column" # form = "ngForm" >
< div fxLayout = "row" fxFlex = "100" fxLayoutAlign = "space-between center" >
< mat-form-field fxFlex = "70" fxLayoutAlign = "start end" >
< input matInput [ ( ngModel ) ] = " fundingAmount " placeholder = "Amount" type = "number" step = "1000" min = "1" max = "{{totalBalance}}" tabindex = "1" required name = "amount" # amount = "ngModel" [ disabled ] = " flgUseAllBalance " >
< mat-hint > Remaining Bal: {{totalBalance - ((fundingAmount) ? fundingAmount : 0) | number}}{{flgUseAllBalance ? '. Amount replaced by UTXO balance' : ''}}< / mat-hint >
< span matSuffix > {{information?.smaller_currency_unit}} < / span >
< mat-error * ngIf = "amount.errors?.required || !fundingAmount" > Amount is required.< / mat-error >
< mat-error * ngIf = "amount.errors?.max" > Amount must be less than or equal to {{totalBalance}}.< / mat-error >
< / mat-form-field >
< div fxFlex = "25" fxLayoutAlign = "start center" >
< mat-slide-toggle tabindex = "2" color = "primary" [ ( ngModel ) ] = " isPrivate " name = "isPrivate" > Private Channel< / mat-slide-toggle >
< / div >
< / div >
< mat-expansion-panel class = "flat-expansion-panel mt-2" expanded = "false" ( closed ) = " onAdvancedPanelToggle ( true ) " ( opened ) = " onAdvancedPanelToggle ( false ) " >
< mat-expansion-panel-header >
< mat-panel-title >
< span > {{advancedTitle}}< / span >
< / mat-panel-title >
< / mat-expansion-panel-header >
< div fxLayout = "column" fxFlex = "100" fxLayoutAlign = "start stretch" >
< div fxLayout = "row" fxFlex = "100" fxLayoutAlign = "space-between center" >
< mat-form-field fxFlex = "48" fxLayoutAlign = "start end" >
< mat-select tabindex = "4" placeholder = "Fee Rate" [ ( value ) ] = " selFeeRate " [ disabled ] = " flgMinConf " >
< mat-option * ngFor = "let feeRateType of feeRateTypes" [ value ] = " feeRateType . feeRateId " >
{{feeRateType.feeRateType}}
< / mat-option >
< / mat-select >
< / mat-form-field >
< div fxFlex = "48" fxLayout = "row" fxLayoutAlign = "start center" >
< mat-checkbox fxFlex = "2" tabindex = "5" color = "primary" [ ( ngModel ) ] = " flgMinConf " ( change ) = " flgMinConf ? selFeeRate = null : minConfValue = null" name = "flgMinConf" fxLayoutAlign = "stretch start" class = "mr-2" > < / mat-checkbox >
< mat-form-field fxFlex = "98" >
< input matInput [ ( ngModel ) ] = " minConfValue " placeholder = "Min Confirmation Blocks" type = "number" name = "blocks" step = "1" min = "0" tabindex = "8" # blocks = "ngModel" [ required ] = " flgMinConf " [ disabled ] = " ! flgMinConf " >
< mat-error * ngIf = "flgMinConf && !minConfValue" > Min Confirmation Blocks is required.< / mat-error >
< / mat-form-field >
< / div >
< / div >
< div fxLayout = "row" fxFlex = "100" fxLayoutAlign = "space-between center" * ngIf = "isCompatibleVersion" >
< mat-form-field fxFlex = "48" fxLayoutAlign = "start end" >
< mat-select tabindex = "6" placeholder = "Coin Selection" ( selectionChange ) = " onUTXOSelectionChange ( $ event ) " [ ( value ) ] = " selUTXOs " multiple >
< mat-select-trigger > {{totalSelectedUTXOAmount | number}} Sats ({{selUTXOs.length > 1 ? selUTXOs.length + ' UTXOs' : '1 UTXO'}})< / mat-select-trigger >
< mat-option * ngFor = "let transaction of transactions" [ value ] = " transaction " > {{transaction.value | number}} Sats< / mat-option >
< / mat-select >
< / mat-form-field >
< mat-slide-toggle fxFlex = "48" tabindex = "7" color = "primary" [ ( ngModel ) ] = " flgUseAllBalance " ( change ) = " onUTXOAllBalanceChange ( ) " name = "flgUseAllBalance" matTooltip = "Use selected UTXOs balance as the amount to be sent. Final amount sent will be less the mining fee." matTooltipPosition = "above" [ disabled ] = " selUTXOs . length < 1 " >
Use selected UTXOs balance
< / mat-slide-toggle >
< / div >
< / div >
< / mat-expansion-panel >
< / form >
< / ng-template >