<div class="main-container container-fluid">
  <ng-container *transloco="let t; prefix: 'bookmarks'">
    <app-side-nav-companion-bar [hasFilter]="true" (filterOpen)="filterOpen.emit($event)" [filterActive]="filterActive">
      <h4 title>
        {{t('title')}}
      </h4>
      <h5 subtitle>{{t('series-count', {num: series().length | number})}}</h5>
    </app-side-nav-companion-bar>
    @if (filter) {
      <app-card-detail-layout
        [isLoading]="isLoadingBookmarks()"
        [items]="bookmarkEntities()"
        [filterSettings]="filterSettings"
        [trackByIdentity]="trackByIdentity"
        [refresh]="refresh"
        [jumpBarKeys]="jumpbarKeys()"
        (applyFilter)="updateFilter($event)"
      >

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

        <ng-template #cardItem let-item  let-position="idx">
          <app-entity-card [entity]="item" [config]="bookmarkConfig()"
                           [index]="position" [maxIndex]="bookmarkEntities().length"
                           (reload)="clearBookmarks(item.data.series)"
          />
        </ng-template>

        <ng-template #noData>
          {{t('no-data')}} <a [href]="WikiLink.Bookmarks" rel="noopener noreferrer" target="_blank">{{t('no-data-2')}}<i class="fa fa-external-link-alt ms-1" aria-hidden="true"></i></a>
        </ng-template>
      </app-card-detail-layout>
    }
  </ng-container>
</div>
