< div fxLayout = "column" fxFlex = "100" fxLayoutAlign = "start stretch" [ perfectScrollbar ] >
< form # form = "ngForm" fxLayout = "column" fxLayoutAlign = "start stretch" class = "settings-container page-sub-title-container" >
< mat-accordion displayMode = "flat" multi = "false" >
< mat-expansion-panel fxLayout = "column" class = "flat-expansion-panel mt-1" >
< mat-expansion-panel-header >
< mat-panel-title >
< fa-icon class = "page-title-img mr-1" [ icon ] = " faEyeSlash " / >
< span class = "page-title" > Open Unannounced Channels< / span >
< / mat-panel-title >
< / mat-expansion-panel-header >
< div fxLayout = "column" fxLayoutAlign = "start stretch" >
< div fxLayout = "row" fxFlex = "100" class = "alert alert-info mb-1" >
< fa-icon class = "mr-1 alert-icon" [ icon ] = " faInfoCircle " / >
< span > Use this control to toggle setting which defaults to opening unannounced channels only.< / span >
< / div >
< div fxLayout = "row wrap" fxLayoutAlign = "start center" >
< mat-slide-toggle tabindex = "1" color = "primary" name = "unannouncedChannels" [ ( ngModel ) ] = " selNode . settings . unannouncedChannels " ( change ) = " ! selNode . settings . unannouncedChannels " > Open Unannounced Channels< / mat-slide-toggle >
< / div >
< / div >
< / mat-expansion-panel >
< mat-expansion-panel fxLayout = "column" class = "flat-expansion-panel mt-1" >
< mat-expansion-panel-header >
< mat-panel-title >
< fa-icon class = "page-title-img mr-1" [ icon ] = " faMoneyBillAlt " / >
< span class = "page-title" > Balance Display< / span >
< / mat-panel-title >
< / mat-expansion-panel-header >
< div fxLayout = "column" fxLayoutAlign = "start stretch" >
< div fxFlex = "100" class = "alert alert-warn" >
< fa-icon class = "mr-1 alert-icon" [ icon ] = " faExclamationTriangle " / >
< span > Fiat conversion calls < strong > < a href = "https://www.blockchain.com/api/exchange_rates_api" target = "blank" > Blockchain.com< / a > < / strong > API to get conversion rates.< / span >
< / div >
< div fxLayout = "row wrap" fxLayoutAlign = "start center" >
< mat-slide-toggle tabindex = "2" color = "primary" name = "fiatConversion" class = "mr-2" [ ( ngModel ) ] = " selNode . settings . fiatConversion " ( change ) = " ! selNode . settings . currencyUnit " > Enable Fiat Conversion< / mat-slide-toggle >
< mat-form-field >
< mat-label > Fiat Currency< / mat-label >
< mat-select # currencyUnit = "ngModel" autoFocus tabindex = "3" name = "currencyUnit" [ disabled ] = " ! selNode . settings . fiatConversion " [ required ] = " selNode . settings . fiatConversion " [ ( ngModel ) ] = " selNode . settings . currencyUnit " ( selectionChange ) = " onCurrencyChange ( $ event ) " >
< mat-option * ngFor = "let currencyUnit of currencyUnits" [ value ] = " currencyUnit . id " >
{{currencyUnit.id}}
< / mat-option >
< / mat-select >
< mat-error * ngIf = "selNode.settings.fiatConversion && !selNode.settings.currencyUnit" > Currency unit is required.< / mat-error >
< / mat-form-field >
< / div >
< / div >
< / mat-expansion-panel >
< mat-expansion-panel fxLayout = "column" class = "flat-expansion-panel mt-1" >
< mat-expansion-panel-header >
< mat-panel-title >
< fa-icon class = "page-title-img mr-1" [ icon ] = " faPaintBrush " / >
< span class = "page-title" > Customization< / span >
< / mat-panel-title >
< / mat-expansion-panel-header >
< div fxLayout = "column" fxLayoutAlign = "start stretch" >
< div fxLayout = "row" fxFlex = "100" class = "alert alert-info mb-0" >
< fa-icon class = "mr-1 alert-icon" [ icon ] = " faInfoCircle " / >
< span > Dashboard layout will be tailored based on the role selected to better serve its needs.< / span >
< / div >
< div fxLayout = "column" fxLayoutAlign = "start start" fxFlex = "100" >
< h4 > Dashboard Layout< / h4 >
< mat-radio-group class = "radio-group" color = "primary" tabindex = "1" name = "userPersona" [ ( ngModel ) ] = " selNode . settings . userPersona " >
< mat-radio-button * ngFor = "let userPersona of userPersonas" class = "radio-text mr-4" [ value ] = " userPersona " [ checked ] = " selNode . settings . userPersona = == userPersona " >
{{userPersona | titlecase}}
< / mat-radio-button >
< / mat-radio-group >
< / div >
< mat-divider class = "mt-1" / >
< div fxLayout = "column" fxFlex = "100" fxLayoutAlign = "start start" >
< h4 > Mode< / h4 >
< mat-radio-group class = "radio-group" color = "primary" name = "themeMode" [ ( ngModel ) ] = " selectedThemeMode " ( change ) = " chooseThemeMode ( ) " >
< mat-radio-button * ngFor = "let themeMode of themeModes" tabindex = "5" class = "radio-text mr-4" [ value ] = " themeMode " > {{themeMode.name}}
< / mat-radio-button >
< / mat-radio-group >
< / div >
< mat-divider class = "mt-1" / >
< div fxLayout = "column" fxLayout . gt-xs = "row" fxFlex = "100" fxLayoutAlign = "space-between stretch" fxLayoutAlign . gt-xs = "start stretch" >
< div fxLayout = "column" fxFlex . gt-xs = "50" fxFlex . gt-md = "40" fxLayoutAlign = "space-between stretch" >
< h4 > Themes< / h4 >
< div fxLayout = "row" fxFlex = "100" fxLayoutAlign = "space-between start" >
< span * ngFor = "let themeColor of themeColors" fxLayout = "row" class = "theme-name" >
< div tabindex = "9" [ class ] = " themeColor . id | lowercase " [ ngClass ] = " { ' skin ' : true , ' selected-color ' : selectedThemeColor = == themeColor . id } " ( click ) = " changeThemeColor ( themeColor . id ) " > < / div >
{{themeColor.name}}
< / span >
< / div >
< / div >
< / div >
< / div >
< / mat-expansion-panel >
< / mat-accordion >
< / form >
< div fxLayout = "column" fxLayoutAlign = "start start" class = "mt-1" >
< div fxLayout = "row" >
< button class = "mr-1" mat-stroked-button color = "primary" tabindex = "10" ( click ) = " onResetSettings ( ) " > Reset< / button >
< button mat-flat-button color = "primary" tabindex = "11" ( click ) = " onUpdateSettings ( ) " > Update< / button >
< / div >
< / div >
< / div >