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