<div class="main-container container-fluid">
  <ng-container *transloco="let t; prefix:'all-annotations'" >
    <app-side-nav-companion-bar [hasFilter]="true" (filterOpen)="filterOpen.emit($event)">
      <h2 title>
        <span>{{t('title')}}</span>
      </h2>

      <h6 subtitle>{{t('annotations-count', {num: pagination().totalItems | number})}} </h6>

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

    <app-card-detail-layout
      [isLoading]="isLoading()"
      [items]="annotations()"
      [pagination]="pagination()"
      [trackByIdentity]="trackByIdentity"
      [jumpBarKeys]="[]"
      [filteringDisabled]="true"
      [refresh]="refresh"
      [filterSettings]="filterSettings"
      [filterOpen]="filterOpen"
      (applyFilter)="updateFilter($event)"
    >

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

      <ng-template #extraButtons>
        <button class="btn btn-secondary ms-2" (click)="exportFilter()">
          {{t('export')}}
        </button>
      </ng-template>

      <ng-template #cardItem let-item let-position="idx">
        <app-annotation-card
          [annotation]="item"
          [allowEdit]="false"
          [isInReader]="false"
          [showInReaderLink]="true"
          [showPageLink]="false"
          [openInIncognitoMode]="true"
          [showSelectionBox]="true"
          [showLocationInformation]="true"
          [listenToUpdates]="true"
          [selected]="bulkSelectionService.isCardSelected('annotations', position)"
          (selection)="bulkSelectionService.handleCardSelection('annotations', position, annotations().length, $event)"
        />
      </ng-template>

    </app-card-detail-layout>

  </ng-container>
</div>
