<ng-container *transloco="let t; prefix: 'preferred-format'">

  <div class="stats-card card p-4">

    <h4 class="stats-title">{{t('title')}}</h4>

    @let mostReadFormatValue = mostReadFormat();
    @if (mostReadFormatValue) {
      <h6 class="stats-subtitle">{{t('sub-title', {name: userName(), format: mostReadFormat()})}}</h6>

      <app-pie-chart [data]="data()" [valueTransformer]="valueTransformer.bind(this)" />
    }  @else if (!formatsResource.isLoading())  {
      <app-stats-no-data [message]="t('no-data')" />
    }


  </div>

</ng-container>
