<div class="main-container container-fluid">
  <ng-container *transloco="let t; prefix: 'reading-lists'">
    <app-side-nav-companion-bar [hasFilter]="true" (filterOpen)="filterOpen.emit($event)" [filterActive]="filterActive()">
      <h4 title>
        <span>{{t('title')}}</span>
        <app-card-actionables [actions]="globalActions" (actionHandler)="performGlobalAction($event)" />
      </h4>
      @if (pagination()) {
        <h5 subtitle class="subtitle-with-actionables">{{t('item-count', {num: pagination()!.totalItems | number})}}</h5>
      }

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

    <app-card-detail-layout
      [gridColumnsTemplate]="'repeat(auto-fill, minmax(30rem, 1fr))'"
      [isLoading]="isLoadingLists()"
      [items]="listEntities()"
      [pagination]="pagination()!"
      [jumpBarKeys]="jumpbarKeys()"
      [trackByIdentity]="trackByIdentity"
      [refresh]="refresh"
      [filterSettings]="filterSettings()"
      [filterOpen]="filterOpen"
      [filteringDisabled]="true"
      (applyFilter)="updateFilter($event)"
    >

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

      <ng-template #cardItem let-item let-position="idx" >
        <div class="px-1">
          <app-reading-list [entity]="item" [index]="position" [maxIndex]="listEntities().length" [config]="readingListConfig()"
                            (reload)="loadPage()" (dataChanged)="updateReadingList($event)" />
        </div>
      </ng-template>

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

  </ng-container>
</div>
