<div class="main-container container-fluid">
  <ng-container *transloco="let t; prefix:'browse-people'" >
    <app-side-nav-companion-bar [hasFilter]="true" (filterOpen)="filterOpen.emit($event)" [filterActive]="filterActive">
      <h2 title>
        <span>{{t('title')}}</span>
      </h2>
      <h6 subtitle>{{t('author-count', {num: pagination.totalItems | number})}} </h6>

    </app-side-nav-companion-bar>

    <app-card-detail-layout
      [isLoading]="isLoading"
      [items]="authors"
      [pagination]="pagination"
      [trackByIdentity]="trackByIdentity"
      [jumpBarKeys]="jumpKeys"
      [filteringDisabled]="true"
      [refresh]="refresh"
      [filterSettings]="filterSettings"
      [filterOpen]="filterOpen"
      (applyFilter)="updateFilter($event)"
    >
      <ng-template #cardItem let-item let-position="idx">
        <app-person-card [entity]="item" [title]="item.name" [imageUrl]="imageService.getPersonImage(item.id)" (clicked)="goToPerson(item)">
          <ng-template #subtitle>
            <div class="tag-meta">
                <div style="font-size: 0.75rem">{{t('series-count', {num: item.seriesCount | compactNumber})}}</div>
                <div style="font-size: 0.75rem">{{t('issue-count', {num: item.chapterCount | compactNumber})}}</div>
            </div>
          </ng-template>
        </app-person-card>
      </ng-template>
    </app-card-detail-layout>

  </ng-container>
</div>
