<div class="main-container container-fluid">
  <ng-container *transloco="let t">
    <app-side-nav-companion-bar [hasFilter]="true" (filterOpen)="filterOpen.emit($event)" [filterActive]="filterActive">
      <h4 title>
        <span>{{libraryName()}}</span>
        <app-card-actionables [actions]="actions()" [entity]="library()" (actionHandler)="handleActionCallback($event)"  />
      </h4>
      @if (active.fragment === '') {
        <h5 subtitle class="subtitle-with-actionables">{{t('common.series-count', {num: pagination.totalItems | number})}} </h5>
      }

    </app-side-nav-companion-bar>
    <app-loading [absolute]="true" [loading]="bulkLoader" />
    @if (filter) {
      <app-card-detail-layout
        [isLoading]="loadingSeries"
        [items]="series()"
        [pagination]="pagination"
        [filterSettings]="filterSettings"
        [trackByIdentity]="trackByIdentity"
        [filterOpen]="filterOpen"
        [jumpBarKeys]="jumpKeys()"
        [refresh]="refresh"
        (applyFilter)="updateFilter($event)"
      >

        <ng-template #topBar>
          <app-bulk-operations />
        </ng-template>

        <ng-template #cardItem let-item let-position="idx">
          <app-series-card [series]="item" [suppressLibraryLink]="true" (reload)="loadPage()"
                           [index]="position" [maxIndex]="series().length" [allowSelection]="true" />
        </ng-template>

        <ng-template #noData>
          {{t('common.no-data')}}
        </ng-template>
      </app-card-detail-layout>
    }
  </ng-container>
</div>
