<ng-container *transloco="let t; prefix: 'reading-pace'">
  @let paceStats = stats();
  @let formatType = type();

  <div class="stats-card card p-4">
    <h4 class="stats-title">{{t('title-' + localePrefix())}}</h4>

    @if (paceStats) {
      <h6 class="stats-subtitle">{{t('sub-title-' + localePrefix(), {username: userName(), count: paceInDays()})}}</h6>
    } @else if (!readingPace.isLoading()) {
      <app-stats-no-data [message]="t('no-data')" />
    }

    @if (paceStats) {

      <!-- Hours Row -->
      <div class="stats-row">
        <div class="stat-icon">
          <i class="fas fa-clock" aria-hidden="true"></i>
        </div>
        <div class="stat-item stat-primary">
          <div class="stat-value">{{ paceStats.hoursRead | compactNumber }}</div>
          <div class="stat-label text-uppercase">{{t('hours-read')}}</div>
        </div>
        <div class="stat-arrow">
          <i class="fas fa-arrow-right" aria-hidden="true"></i>
        </div>
        <div class="stat-item">
          <div class="stat-value">{{ hoursPerYear() }}</div>
          <div class="stat-label text-uppercase">{{t('per-year')}}</div>
        </div>
        <div class="stat-arrow">
          <i class="fas fa-arrow-right" aria-hidden="true"></i>
        </div>
        <div class="stat-item">
          <div class="stat-value">{{ hoursPerMonth() }}</div>
          <div class="stat-label text-uppercase">{{t('per-month')}}</div>
        </div>
        <div class="stat-arrow">
          <i class="fas fa-arrow-right" aria-hidden="true"></i>
        </div>
        <div class="stat-item">
          <div class="stat-value">{{ hoursPerDay() }}</div>
          <div class="stat-label text-uppercase">{{t('per-day')}}</div>
        </div>
      </div>

      @if (formatType === ReadingPaceType.Books) {
        <!-- Words/Books Row -->
        <div class="stats-row">
          <div class="stat-icon">
            <i class="fas fa-book" aria-hidden="true"></i>
          </div>
          <div class="stat-item stat-primary">
            <div class="stat-value">{{ paceStats.wordsRead | compactNumber }}</div>
            <div class="stat-label text-uppercase">{{t('words-read')}}</div>
          </div>
          <div class="stat-arrow">
            <i class="fas fa-arrow-right" aria-hidden="true"></i>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ wordsPerYear() }}</div>
            <div class="stat-label text-uppercase">{{t('per-year')}}</div>
          </div>
          <div class="stat-arrow">
            <i class="fas fa-arrow-right" aria-hidden="true"></i>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ wordsPerMonth() }}</div>
            <div class="stat-label text-uppercase">{{t('per-month')}}</div>
          </div>
          <div class="stat-arrow">
            <i class="fas fa-arrow-right" aria-hidden="true"></i>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ wordsPerDay() }}</div>
            <div class="stat-label text-uppercase">{{t('per-day')}}</div>
          </div>
        </div>

        <!-- Books Row -->
        <div class="stats-row">
          <div class="stat-icon">
            <i class="fas fa-book" aria-hidden="true"></i>
          </div>
          <div class="stat-item stat-primary">
            <div class="stat-value">{{ paceStats.booksRead | compactNumber }}</div>
            <div class="stat-label text-uppercase">{{t('books-read')}}</div>
          </div>
          <div class="stat-arrow">
            <i class="fas fa-arrow-right" aria-hidden="true"></i>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ booksPerYear() }}</div>
            <div class="stat-label text-uppercase">{{t('per-year')}}</div>
          </div>
          <div class="stat-arrow">
            <i class="fas fa-arrow-right" aria-hidden="true"></i>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ booksPerMonth() }}</div>
            <div class="stat-label text-uppercase">{{t('per-month')}}</div>
          </div>
          <div class="stat-arrow">
            <i class="fas fa-arrow-right" aria-hidden="true"></i>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ booksPerDay() }}</div>
            <div class="stat-label text-uppercase">{{t('per-day')}}</div>
          </div>
        </div>
      } @else {
        <!-- Pages/Comics Row -->
        <div class="stats-row">
          <div class="stat-icon">
            <i class="fas fa-book-open" aria-hidden="true"></i>
          </div>
          <div class="stat-item stat-primary">
            <div class="stat-value">{{ paceStats.pagesRead | compactNumber }}</div>
            <div class="stat-label text-uppercase">{{t('pages-read')}}</div>
          </div>
          <div class="stat-arrow">
            <i class="fas fa-arrow-right" aria-hidden="true"></i>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ pagesPerYear() }}</div>
            <div class="stat-label text-uppercase">{{t('per-year')}}</div>
          </div>
          <div class="stat-arrow">
            <i class="fas fa-arrow-right" aria-hidden="true"></i>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ pagesPerMonth() }}</div>
            <div class="stat-label text-uppercase">{{t('per-month')}}</div>
          </div>
          <div class="stat-arrow">
            <i class="fas fa-arrow-right" aria-hidden="true"></i>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ pagesPerDay() }}</div>
            <div class="stat-label text-uppercase">{{t('per-day')}}</div>
          </div>
        </div>

        <!-- Comics Row-->
        @if (paceStats.comicsRead > 0) {
          <div class="stats-row">
            <div class="stat-icon">
              <i class="fas fa-book-open" aria-hidden="true"></i>
            </div>
            <div class="stat-item stat-primary">
              <div class="stat-value">{{ paceStats.comicsRead | compactNumber }}</div>
              <div class="stat-label text-uppercase">{{t('comics-read')}}</div>
            </div>
            <div class="stat-arrow">
              <i class="fas fa-arrow-right" aria-hidden="true"></i>
            </div>
            <div class="stat-item">
              <div class="stat-value">{{ comicsPerYear() }}</div>
              <div class="stat-label text-uppercase">{{t('per-year')}}</div>
            </div>
            <div class="stat-arrow">
              <i class="fas fa-arrow-right" aria-hidden="true"></i>
            </div>
            <div class="stat-item">
              <div class="stat-value">{{ comicsPerMonth() }}</div>
              <div class="stat-label text-uppercase">{{t('per-month')}}</div>
            </div>
            <div class="stat-arrow">
              <i class="fas fa-arrow-right" aria-hidden="true"></i>
            </div>
            <div class="stat-item">
              <div class="stat-value">{{ comicsPerDay() }}</div>
              <div class="stat-label text-uppercase">{{t('per-day')}}</div>
            </div>
          </div>
        }


      }



      <span class="stats-note text-muted">{{t('disclaimer-' + localePrefix())}}</span>
    }

  </div>

</ng-container>
