<ng-container *transloco="let t; read: 'collection-detail'">
  <div #companionBar>
    <app-side-nav-companion-bar *ngIf="series !== undefined" [hasFilter]="true" (filterOpen)="filterOpen.emit($event)" [filterActive]="filterActive">
      <ng-container title>
        <h2 *ngIf="collectionTag !== undefined">
          <app-card-actionables [disabled]="actionInProgress" (actionHandler)="performAction($event)" [actions]="collectionTagActions" [labelBy]="collectionTag.title" iconClass="fa-ellipsis-v"></app-card-actionables>
          {{collectionTag.title}}<span class="ms-1" *ngIf="collectionTag.promoted">(<i aria-hidden="true" class="fa fa-angle-double-up"></i>)</span>
        </h2>
      </ng-container>
    </app-side-nav-companion-bar>
  </div>

  <div [ngStyle]="{'height': ScrollingBlockHeight}" class="main-container container-fluid pt-2" *ngIf="collectionTag !== undefined" #scrollingBlock>
    <div class="row mb-3" *ngIf="summary.length > 0">
      <div class="col-md-2 col-xs-4 col-sm-6 d-none d-sm-block">
        <app-image maxWidth="481px" [imageUrl]="imageService.getCollectionCoverImage(collectionTag.id)"></app-image>
      </div>
      <div class="col-md-10 col-xs-8 col-sm-6 mt-2">
        <app-read-more [text]="summary" [maxLength]="250"></app-read-more>
      </div>
      <hr>
    </div>
    <app-bulk-operations [actionCallback]="bulkActionCallback"></app-bulk-operations>

    <app-card-detail-layout
      header="Series"
      [isLoading]="isLoading"
      [items]="series"
      [pagination]="pagination"
      [filterSettings]="filterSettings"
      [filterOpen]="filterOpen"
      [parentScroll]="scrollingBlock"
      [trackByIdentity]="trackByIdentity"
      [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>

      <div *ngIf="!filterActive && series.length === 0">
        <ng-template #noData>
          {{t('no-data')}}
        </ng-template>
      </div>

      <div *ngIf="filterActive && series.length === 0">
        <ng-template #noData>
          {{t('no-data-filtered')}}
        </ng-template>
      </div>
    </app-card-detail-layout>
  </div>
</ng-container>
