<div fxLayout="row wrap" fxLayoutAlign="start center" class="page-title-container">
  <fa-icon class="page-title-img mr-1" [icon]="faChartPie" />
  <span class="page-title">Lightning 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" />
    </mat-card-content>
  </mat-card>
</div>
<div fxLayout="row" fxLayoutAlign="start center" class="page-title-container">
  <fa-icon class="page-title-img mr-1" [icon]="faExchangeAlt" />
  <span class="page-title">Lightning Transactions</span>
</div>
<div fxLayout="column" class="padding-gap-x">
  <mat-card>
    <mat-card-content fxLayout="column">
      <nav mat-tab-nav-bar mat-stretch-tabs="false" mat-align-tabs="start" [tabPanel]="tabPanel">
        <div *ngFor="let link of links" tabindex="1" role="tab" mat-tab-link class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div>
      </nav>
      <mat-tab-nav-panel #tabPanel />
      <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="mat-tab-body-wrapper">
        <router-outlet />
      </div>
    </mat-card-content>
  </mat-card>
</div>
  