<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch">
  <div fxLayout="row">
    <button mat-flat-button color="primary" type="submit" tabindex="1" (click)="onOpenChannel()">Open Channel</button>
  </div>
  <div fxLayout="column" fxFlex="100" class="bordered-box">
    <mat-tab-group mat-stretch-tabs="false" mat-align-tabs="start" [(selectedIndex)]="activeLink" (selectedTabChange)="onSelectedTabChange($event)">
      <mat-tab>
        <ng-template mat-tab-label>
          <span matBadgeOverlap="false" class="tab-badge" matBadge="{{openChannels}}">Open</span>
        </ng-template>
      </mat-tab>
      <mat-tab>
        <ng-template mat-tab-label>
          <span matBadgeOverlap="false" class="tab-badge" matBadge="{{pendingChannels}}">Pending/Inactive</span>
        </ng-template>
      </mat-tab>
      <mat-tab>
        <ng-template mat-tab-label>
          <span matBadgeOverlap="false" class="tab-badge" matBadge="{{activeHTLCs}}">Active HTLCs</span>
        </ng-template>
      </mat-tab>
    </mat-tab-group>
    <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="padding-gap-x-large">
      <router-outlet />
    </div>
  </div>
</div>
