<ng-container *transloco="let t; prefix:'active-user-card'">
  @let activeUser = user();
  <div class="card active-user-card">
    <div class="card-body">
      <!-- Header row: avatar, name, hours in period -->
      <div class="d-flex align-items-center gap-3 mb-3">
        <div class="user-avatar rounded-circle d-flex align-items-center justify-content-center" role="img">
          <app-profile-icon [userId]="activeUser.userId" [size]="48" />
        </div>

        <h6 class="mb-0 flex-grow-1 text-truncate username">
          <a [routerLink]="['/profile', activeUser.userId]">{{activeUser.username}}</a>
        </h6>

        <div class="hours-period text-end">
          <span class="hours-value">{{ activeUser.timePeriodHours | timeDuration }}</span>
          <span class="hours-label">{{ timeFrameLabel() }}</span>
        </div>
      </div>

      <!-- Top series covers -->
      @if (activeUser.topSeries.length > 0) {
        <div
          class="series-covers d-flex gap-2 mb-3"
          role="list"
          [attr.aria-label]="'Top series read by ' + activeUser.username">
          @for (series of activeUser.topSeries; track series.id) {
            <div
              class="series-cover-wrapper"
              role="listitem"
              [title]="series.name">
              @if (series.coverImage) {
                <app-image [imageUrl]="imageService.getSeriesCoverImage(series.id)"
                           [width]="'60px'" [height]="'90px'"
                           classes="series-cover" [attr.alt]="series.name" />
              } @else {
                <div class="series-cover series-cover--placeholder d-flex align-items-center justify-content-center">
                  <i class="fa-solid fa-book" aria-hidden="true"></i>
                </div>
              }
            </div>
          }
        </div>
      }

      <div class="stats-row">
        <span class="stat-item">
          {{ t('total-hours', {duration: activeUser.totalHours | timeDuration}) }}
        </span>

        @if (activeUser.totalComics > 0) {
          <span class="stat-divider" aria-hidden="true">|</span>
          <span class="stat-item">
            {{ t('comics-count', {count: activeUser.totalComics}) }}
          </span>
        }

        @if (activeUser.totalBooks > 0) {
          <span class="stat-divider" aria-hidden="true">|</span>
          <span class="stat-item">
            {{ t('books-count', {count: activeUser.totalBooks}) }}
          </span>
        }
      </div>
    </div>
  </div>
</ng-container>
