<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="padding-gap-x">
  <div fxLayout="row">
    <button mat-flat-button color="primary" (click)="onOpenChannel()" type="submit" tabindex="1">Open Channel</button>
  </div>
  <div fxLayout="column" fxFlex="100" class="my-2 bordered-box">
    <mat-tab-group [(selectedIndex)]="activeLink" (selectedTabChange)="onSelectedTabChange($event)">
      <mat-tab>
        <ng-template mat-tab-label>
          <span matBadge="{{numOpenChannels}}" matBadgeOverlap="false" class="tab-badge">Open</span>
        </ng-template>
      </mat-tab>
      <mat-tab>
        <ng-template mat-tab-label>
          <span matBadge="{{numPendingChannels}}" matBadgeOverlap="false" class="tab-badge">Pending</span>
        </ng-template>
      </mat-tab>
      <mat-tab>
        <ng-template mat-tab-label>
          <span matBadge="{{numClosedChannels}}" matBadgeOverlap="false" class="tab-badge">Closed</span>
        </ng-template>
      </mat-tab>
      <mat-tab>
        <ng-template mat-tab-label>
          <span matBadge="{{numActiveHTLCs}}" matBadgeOverlap="false" class="tab-badge">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></router-outlet>
    </div>
  </div>
</div>
