<div fxLayout="row" fxLayoutAlign="start center" class="padding-gap-x page-title-container">
  <fa-icon [icon]="faChartPie" class="page-title-img mr-1"></fa-icon>
  <span class="page-title">On-chain Balance</span>
</div>
<div fxLayout="column" class="padding-gap-x mb-4">
  <mat-card>
    <mat-card-content fxLayout="column">
      <rtl-currency-unit-converter [values]="balances" [currencyUnits]="selNode.currencyUnits"></rtl-currency-unit-converter>
    </mat-card-content>
  </mat-card>
</div>
<div fxLayout="row" fxLayoutAlign="start center" class="padding-gap-x page-title-container">
  <fa-icon [icon]="faUsers" class="page-title-img mr-1"></fa-icon>
  <span class="page-title">Connections</span>
</div>
<div fxLayout="column" class="padding-gap-x">
  <mat-card>
    <mat-card-content fxLayout="column">
      <mat-tab-group>
        <mat-tab>
          <ng-template mat-tab-label>
            <span matBadge="{{activeChannels}}" matBadgeOverlap="false" class="tab-badge">Channels</span>
          </ng-template>
          <rtl-cl-channel-manage></rtl-cl-channel-manage>
        </mat-tab>
        <mat-tab>
          <ng-template mat-tab-label>
            <span matBadge="{{activePeers}}" matBadgeOverlap="false" class="tab-badge">Peers</span>
          </ng-template>
          <rtl-cl-peers></rtl-cl-peers>
        </mat-tab>
      </mat-tab-group>
    </mat-card-content>
  </mat-card>
</div>