<ng-container *transloco="let t; prefix: 'reads-by-month'">

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

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

    @let mostReadValue = highestRead();
    @if (mostReadValue) {
      <h6 class="stats-subtitle">{{t('sub-title', {username: userName(), year: mostReadValue.year, month: mostReadValue.month, reads: mostReadValue.count | number})}}</h6>

      <app-line-chart
        [axisLabels]="axisLabels()"
        [data]="data()"
        [legendLabels]="legendLabels()"
        [showLegend]="false"
      />

    } @else if (!readsByMonthResource().isLoading())  {
      <app-stats-no-data [message]="t('no-data')" />
    }
  </div>

</ng-container>
