<div fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch" class="bordered-box">
  <mat-tab-group mat-stretch-tabs="false" mat-align-tabs="start" [selectedIndex]="selectedTableIndex" (selectedIndexChange)="onSelectedIndexChanged($event)">
    <mat-tab>
      <ng-template mat-tab-label>
        <span matBadgeOverlap="false" class="tab-badge" matBadge="{{numUtxos}}">UTXOs</span>
      </ng-template>
      <rtl-on-chain-utxos fxLayout="row" fxFlex="100" [isDustUTXO]="false" [dustAmount]="DUST_AMOUNT"></rtl-on-chain-utxos>
    </mat-tab>
    <mat-tab>
      <ng-template mat-tab-label>
        <span matBadgeOverlap="false" class="tab-badge" matBadge="{{numTransactions}}">Transactions</span>
      </ng-template>
      <rtl-on-chain-transaction-history fxLayout="row" fxFlex="100"></rtl-on-chain-transaction-history>
    </mat-tab>
    <mat-tab>
      <ng-template mat-tab-label>
        <span matBadgeOverlap="false" class="tab-badge" matBadge="{{numDustUtxos}}">Dust UTXOs</span>
      </ng-template>
      <rtl-on-chain-utxos fxLayout="row" fxFlex="100" [isDustUTXO]="true" [dustAmount]="DUST_AMOUNT"></rtl-on-chain-utxos>
    </mat-tab>
  </mat-tab-group>
</div>
