<div fxLayout="column" fxFlex="100" class="mt-2 bordered-box">
  <mat-tab-group>
    <mat-tab>
      <ng-template mat-tab-label>
        <span matBadge="{{numOfOpenChannels}}" matBadgeOverlap="false" class="tab-badge">Open</span>
      </ng-template>
      <rtl-ecl-channel-open-table></rtl-ecl-channel-open-table>
    </mat-tab>
    <mat-tab>
      <ng-template mat-tab-label>
        <span matBadge="{{numOfPendingChannels}}" matBadgeOverlap="false" class="tab-badge">Pending</span>
      </ng-template>
      <rtl-ecl-channel-pending-table></rtl-ecl-channel-pending-table>
    </mat-tab>
    <mat-tab>
      <ng-template mat-tab-label>
        <span matBadge="{{numOfInactiveChannels}}" matBadgeOverlap="false" class="tab-badge">Inactive</span>
      </ng-template>
      <rtl-ecl-channel-inactive-table></rtl-ecl-channel-inactive-table>
    </mat-tab>
  </mat-tab-group>
</div>
