<ng-container *transloco="let t; read: 'reading-lists'">
  <app-side-nav-companion-bar>
    <h2 title>
      <app-card-actionables [actions]="globalActions" (actionHandler)="performGlobalAction($event)"></app-card-actionables>
      <span>{{t('title')}}</span>
    </h2>
    <h6 subtitle class="subtitle-with-actionables" *ngIf="pagination">{{t('item-count', {num: pagination.totalItems | number})}}</h6>
  </app-side-nav-companion-bar>

  <app-card-detail-layout
    [isLoading]="loadingLists"
    [items]="lists"
    [pagination]="pagination"
    [jumpBarKeys]="jumpbarKeys"
    [filteringDisabled]="true"
    [trackByIdentity]="trackByIdentity"
  >
    <ng-template #cardItem let-item let-position="idx" >
      <app-card-item [title]="item.title" [entity]="item" [actions]="actions[item.id]"
                     [suppressLibraryLink]="true" [imageUrl]="imageService.getReadingListCoverImage(item.id)"
                     (clicked)="handleClick(item)"></app-card-item>
    </ng-template>

    <ng-template #noData>
      {{t('no-data')}} {{t('create-one-part-1')}} <a href="https://wiki.kavitareader.com/en/guides/get-started-using-your-library#reading-list" 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>
