<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 matBadge="{{numUtxos}}" matBadgeOverlap="false" class="tab-badge">UTXOs</span>
      </ng-template>
      <rtl-on-chain-utxos fxLayout="row" fxFlex="100" [isDustUTXO]="false" [dustAmount]="DUST_AMOUNT" />
    </mat-tab>
    <mat-tab>
      <ng-template mat-tab-label>
        <span matBadge="{{numTransactions}}" matBadgeOverlap="false" class="tab-badge">Transactions</span>
      </ng-template>
      <rtl-on-chain-transaction-history fxLayout="row" fxFlex="100" />
    </mat-tab>
    <mat-tab>
      <ng-template mat-tab-label>
        <span matBadge="{{numDustUtxos}}" matBadgeOverlap="false" class="tab-badge">Dust UTXOs</span>
      </ng-template>
      <rtl-on-chain-utxos fxLayout="row" fxFlex="100" [isDustUTXO]="true" [dustAmount]="DUST_AMOUNT" />
    </mat-tab>
  </mat-tab-group>
</div>
