<mat-tab-group mat-stretch-tabs="false" mat-align-tabs="start">
  <mat-tab *ngFor="let currencyUnit of currencyUnits" label="{{ currencyUnit }}">
    <div fxLayout="row" fxFlex="100" fxLayoutAlign="start start">
      <div *ngFor="let value of values" fxLayout="column" fxLayoutAlign="center start" class="cc-data-block">
        <div class="cc-data-title" fxLayout="row" fxFlex="100" fxLayoutAlign="start start">
          {{value.title}}
          <mat-icon *ngIf="value.tooltip" matTooltipPosition="below" class="info-icon" [matTooltip]="value.tooltip">info_outline</mat-icon>
        </div>
        <span *ngIf="currencyUnit === currencyUnitEnum.SATS" class="cc-data-value">
          {{value.dataValue | number:'1.0-0'}}
        </span>
        <span *ngIf="currencyUnit === currencyUnitEnum.BTC" class="cc-data-value">
          {{value[currencyUnitEnum.BTC] | number:currencyUnitFormats.BTC}}
        </span>
        <span *ngIf="fiatConversion && currencyUnit !== currencyUnitEnum.SATS && currencyUnit !== currencyUnitEnum.BTC && conversionErrorMsg === ''" class="cc-data-value">
          {{value[currencyUnitEnum.OTHER] | number:currencyUnitFormats.OTHER}}
        </span>
      </div>
    </div>
    <div *ngIf="fiatConversion && currencyUnit !== currencyUnitEnum.SATS && currencyUnit !== currencyUnitEnum.BTC && conversionErrorMsg !== ''" fxLayout="row" fxFlex="100" class="p-1 error-border mt-1">
      <div class="cc-data-block">{{conversionErrorMsg}}</div>
    </div>
  </mat-tab>
</mat-tab-group>
