<ng-container *transloco="let t; prefix: 'profile-stat-bar'">
  <div class="row g-0 mt-4 mb-3 d-flex justify-content-around">


    @if (dataResource.hasValue()) {
      @let data = dataResource.value();

      <div class="col-auto mb-2">
        <app-icon-and-title [label]="t('books-read-label')" [clickable]="false"
                            fontClasses="fa-solid fa-book"
                            [title]="t('books-read-tooltip', {count: data?.booksRead | number})">
          {{data?.booksRead | number}}
        </app-icon-and-title>
      </div>
      <div class="vr d-none d-lg-block m-2"></div>

      <div class="col-auto mb-2">
        <app-icon-and-title [label]="t('comics-read-label')" [clickable]="false"
                            fontClasses="fa-solid fa-book-open"
                            [title]="t('comics-read-tooltip', {count: data?.comicsRead | number})">
          {{data?.comicsRead | number}}
        </app-icon-and-title>
      </div>
      <div class="vr d-none d-lg-block m-2"></div>

      <div class="col-auto mb-2 clickable">
        <app-icon-and-title [label]="t('pages-read-label')" [clickable]="false"
                            fontClasses="fa-solid fa-file"
                            (clicked)="openPageByYearList()"
                            [title]="t('pages-read-tooltip', {count: data?.pagesRead | number})">
          {{data?.pagesRead | number}}
        </app-icon-and-title>
      </div>
      <div class="vr d-none d-lg-block m-2"></div>

      <div class="col-auto mb-2 clickable">
        <app-icon-and-title [label]="t('words-read-label')" [clickable]="false"
                            fontClasses="fa-solid fa-file-lines"
                            (clicked)="openWordByYearList()"
                            [title]="t('words-read-tooltip', {count: data?.wordsRead | number})">
          {{data?.wordsRead | number}}
        </app-icon-and-title>
      </div>
      <div class="vr d-none d-lg-block m-2"></div>

      <div class="col-auto mb-2">
        <app-icon-and-title [label]="t('authors-read-label')" [clickable]="false"
                            fontClasses="fa-solid fa-users"
                            [title]="t('authors-read-tooltip', {count: data?.authorsRead | number})">
          {{data?.authorsRead | number}}
        </app-icon-and-title>
      </div>
      <div class="vr d-none d-lg-block m-2"></div>

      <div class="col-auto mb-2">
        <app-icon-and-title [label]="t('reviews-label')" [clickable]="false"
                            fontClasses="fa-solid fa-file-pen"
                            [title]="t('reviews-tooltip', {count: data?.reviews | number})">
          {{data?.reviews | number}}
        </app-icon-and-title>
      </div>
      <div class="vr d-none d-lg-block m-2"></div>

      <div class="col-auto mb-2">
        <app-icon-and-title [label]="t('ratings-label')" [clickable]="false"
                            fontClasses="fa-solid fa-star"
                            [title]="t('ratings-tooltip', {count: data?.ratings | number})">
          {{data?.ratings | number}}
        </app-icon-and-title>
      </div>
    }
  </div>
</ng-container>
