< div fxLayout = "column" * ngIf = "selNode.userPersona === userPersonaEnum.OPERATOR; else merchantDashboard" >
< div fxLayout = "row" fxLayoutAlign = "start end" class = "padding-gap-x page-title-container mb-0" >
< fa-icon [ icon ] = " ! flgLoading [ 0 ] ? faSmile : faFrown " class = "page-title-img mr-1" > < / fa-icon >
< span class = "page-title" > {{!flgLoading[0] ? 'Welcome ' + information.alias + '! Your node is up and running.' : 'Error! Please check the server connection.'}}< / span >
< / div >
< mat-grid-list cols = "10" [ rowHeight ] = " operatorCardHeight " >
< mat-grid-tile * ngFor = "let card of operatorCards" [ colspan ] = " card . cols " [ rowspan ] = " card . rows " >
< mat-card fxLayout = "column" fxLayoutAlign = "start start" class = "dashboard-card p-24" >
< mat-card-header >
< mat-card-title >
< fa-icon [ icon ] = " card . icon " class = "mr-1" > < / fa-icon >
< span > {{card.title}}< / span >
< button * ngIf = "card.link" mat-icon-button class = "more-button mt-1" [ matMenuTriggerFor ] = " menuOperator " aria-label = "Toggle menu" >
< mat-icon > more_vert< / mat-icon >
< / button >
< mat-menu # menuOperator = "matMenu" class = "dashboard-vert-menu" xPosition = "before" >
< button mat-menu-item ( click ) = " onNavigateTo ( card . link ) " > Go To {{card.goTo}}< / button >
< button * ngIf = "card.id === 'capacity'" ( click ) = " onsortChannelsBy ( ) " mat-menu-item > Sort By {{sortField === 'Balance Score' ? 'Capacity' : 'Balance Score'}}< / button >
< / mat-menu >
< / mat-card-title >
< / mat-card-header >
< mat-card-content class = "dashboard-card-content w-100" fxFlex = "95" >
< div [ ngSwitch ] = " card . id " fxLayout = "column" fxFlex = "100" >
< rtl-cl-node-info fxFlex = "100" * ngSwitchCase = "'node'" [ information ] = " information " [ showColorFieldSeparately ] = " false " [ ngClass ] = " { ' error-border ' : flgLoading [ 0 ] = = = ' error ' } " > < / rtl-cl-node-info >
< rtl-cl-balances-info fxFlex = "100" * ngSwitchCase = "'balance'" [ balances ] = " balances " [ ngClass ] = " { ' error-border ' : flgLoading [ 2 ] = = = ' error ' } " > < / rtl-cl-balances-info >
< rtl-cl-channel-capacity-info fxFlex = "100" * ngSwitchCase = "'capacity'" [ sortBy ] = " sortField " [ channelBalances ] = " channelBalances " [ allChannels ] = " allChannelsCapacity " [ ngClass ] = " { ' error-border ' : flgLoading [ 5 ] = = = ' error ' } " > < / rtl-cl-channel-capacity-info >
< rtl-cl-fee-info fxFlex = "100" * ngSwitchCase = "'fee'" [ fees ] = " fees " [ ngClass ] = " { ' error-border ' : flgLoading [ 1 ] = = = ' error ' } " > < / rtl-cl-fee-info >
< rtl-cl-channel-status-info fxFlex = "100" * ngSwitchCase = "'status'" [ channelsStatus ] = " channelsStatus " [ ngClass ] = " { ' error-border ' : flgLoading [ 0 ] = = = ' error ' } " > < / rtl-cl-channel-status-info >
< h3 * ngSwitchDefault > Error! Unable to find information!< / h3 >
< / div >
< / mat-card-content >
< / mat-card >
< / mat-grid-tile >
< / mat-grid-list >
< / div >
< ng-template # merchantDashboard >
< div fxLayout = "row" fxLayoutAlign = "start end" class = "padding-gap-x page-title-container mb-0" >
< fa-icon [ icon ] = " faSmile " class = "page-title-img mr-1" > < / fa-icon >
< span class = "page-title" > Welcome {{information.alias}}! Your node is up and running.< / span >
< / div >
< mat-grid-list cols = "6" [ rowHeight ] = " merchantCardHeight " >
< mat-grid-tile * ngFor = "let card of merchantCards" [ colspan ] = " card . cols " [ rowspan ] = " card . rows " >
< mat-card fxLayout = "column" fxLayoutAlign = "start start" class = "dashboard-card" [ ngClass ] = " { ' p-24 ' : card . id ! = = ' transactions ' } " >
< mat-card-header * ngIf = "card.id !== 'transactions'" >
< mat-card-title >
< fa-icon [ icon ] = " card . icon " class = "mr-1" > < / fa-icon >
< span > {{card.title}}< / span >
< button * ngIf = "card.link" mat-icon-button class = "more-button mt-1" [ matMenuTriggerFor ] = " menuMerchant " aria-label = "Toggle menu" >
< mat-icon > more_vert< / mat-icon >
< / button >
< mat-menu # menuMerchant = "matMenu" class = "dashboard-vert-menu" xPosition = "before" >
< button mat-menu-item ( click ) = " onNavigateTo ( card . link ) " > Go To {{card.goTo}}< / button >
< / mat-menu >
< / mat-card-title >
< / mat-card-header >
< mat-card-content class = "dashboard-card-content w-100" fxFlex = "{{card.id !== 'transactions' ? 95 : 100}}" >
< div [ ngSwitch ] = " card . id " fxLayout = "column" fxFlex = "100" >
< rtl-cl-node-info fxFlex = "100" * ngSwitchCase = "'node'" [ information ] = " information " [ ngClass ] = " { ' error-border ' : flgLoading [ 0 ] = = = ' error ' } " > < / rtl-cl-node-info >
< rtl-cl-balances-info fxFlex = "100" * ngSwitchCase = "'balance'" [ balances ] = " balances " [ ngClass ] = " { ' error-border ' : flgLoading [ 2 ] = = = ' error ' } " > < / rtl-cl-balances-info >
< rtl-cl-channel-liquidity-info fxFlex = "100" * ngSwitchCase = "'inboundLiq'" [ direction ] = " ' In ' " [ totalLiquidity ] = " totalInboundLiquidity " [ allChannels ] = " allInboundChannels " [ ngClass ] = " { ' error-border ' : flgLoading [ 5 ] = = = ' error ' } " > < / rtl-cl-channel-liquidity-info >
< rtl-cl-channel-liquidity-info fxFlex = "100" * ngSwitchCase = "'outboundLiq'" [ direction ] = " ' Out ' " [ totalLiquidity ] = " totalOutboundLiquidity " [ allChannels ] = " allOutboundChannels " [ ngClass ] = " { ' error-border ' : flgLoading [ 5 ] = = = ' error ' } " > < / rtl-cl-channel-liquidity-info >
< span fxLayout = "column" fxFlex = "100" fxLayoutAlign = "space-between start" * ngSwitchCase = "'transactions'" >
< mat-tab-group fxLayout = "column" class = "w-100 dashboard-tabs-group" >
< mat-tab label = "Receive" > < rtl-cl-lightning-invoices class = "h-100" [ showDetails ] = " false " > < / rtl-cl-lightning-invoices > < / mat-tab >
< mat-tab label = "Pay" > < rtl-cl-lightning-payments [ showDetails ] = " false " > < / rtl-cl-lightning-payments > < / mat-tab >
< mat-tab [ disabled ] = " true " >
< ng-template mat-tab-label >
< button mat-icon-button class = "more-button" [ matMenuTriggerFor ] = " menuTransactions " aria-label = "Toggle menu" style = "max-width: 20px;" >
< mat-icon > more_vert< / mat-icon >
< / button >
< mat-menu # menuTransactions = "matMenu" class = "dashboard-vert-menu" xPosition = "before" >
< button mat-menu-item ( click ) = " onNavigateTo ( card . link ) " > Go To {{card.goTo}}< / button >
< / mat-menu >
< / ng-template >
< / mat-tab >
< / mat-tab-group >
< / span >
< h3 * ngSwitchDefault > Error! Unable to find information!< / h3 >
< / div >
< / mat-card-content >
< / mat-card >
< / mat-grid-tile >
< / mat-grid-list >
< / ng-template >