<ng-container *transloco="let t; read: 'all-series'">
  <app-side-nav-companion-bar [hasFilter]="true" (filterOpen)="filterOpen.emit($event)" [filterActive]="filterActive">
    <h2 title>
      {{title}}
    </h2>
    <h6 subtitle *ngIf="pagination">{{t('series-count', {num: pagination.totalItems | number})}}</h6>
  </app-side-nav-companion-bar>
  <app-bulk-operations [actionCallback]="bulkActionCallback"></app-bulk-operations>
  <app-card-detail-layout
    [isLoading]="loadingSeries"
    [items]="series"
    [trackByIdentity]="trackByIdentity"
    [filterSettings]="filterSettings"
    [filterOpen]="filterOpen"
    [jumpBarKeys]="jumpbarKeys"
    (applyFilter)="updateFilter($event)"
  >
    <ng-template #cardItem let-item let-position="idx">
      <app-series-card [data]="item" [libraryId]="item.libraryId" (reload)="loadPage()"
                       (selection)="bulkSelectionService.handleCardSelection('series', position, series.length, $event)"
                       [selected]="bulkSelectionService.isCardSelected('series', position)" [allowSelection]="true"></app-series-card>
    </ng-template>
  </app-card-detail-layout>

</ng-container>
