<ng-container *transloco="let t; read: 'reading-list-detail'">
  <app-side-nav-companion-bar [hasExtras]="readingList !== undefined" [extraDrawer]="extrasDrawer">
    <h2 title>
      <app-card-actionables (actionHandler)="performAction($event)" [actions]="actions" [attr.aria-labelledby]="readingList?.title" *ngIf="actions.length > 0"></app-card-actionables>
      {{readingList?.title}}
      <span *ngIf="readingList?.promoted" class="ms-1">(<i class="fa fa-angle-double-up" aria-hidden="true"></i>)</span>
    </h2>
    <h6 subtitle class="subtitle-with-actionables">{{t('item-count', {num: items.length | number})}}</h6>

    <ng-template #extrasDrawer let-offcanvas>
      <div style="margin-top: 56px" *ngIf="readingList">
        <div class="offcanvas-header">
          <h4 class="offcanvas-title" id="offcanvas-basic-title">{{t('page-settings-title')}}</h4>
          <button type="button" class="btn-close" aria-label="Close" (click)="offcanvas.dismiss()"></button>
        </div>
        <div class="offcanvas-body">
          <div class="row g-0">
            <div class="col-md-12 col-sm-12 pe-2 mb-3">
              <button class="btn btn-danger" (click)="removeRead()" [disabled]="readingList.promoted && !this.isAdmin">
                  <span>
                      <i class="fa fa-check"></i>
                  </span>
                <span class="read-btn--text">&nbsp;{{t('remove-read')}}</span>
              </button>

              <div class="col-auto ms-2 mt-2" *ngIf="!(readingList?.promoted && !this.isAdmin)">
                <div class="form-check form-check-inline">
                  <input class="form-check-input" type="checkbox" id="accessibility-mode" [value]="accessibilityMode" (change)="updateAccessibilityMode()">
                  <label class="form-check-label" for="accessibility-mode">{{t('order-numbers-label')}}</label>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </ng-template>
  </app-side-nav-companion-bar>
  <div class="container-fluid mt-2" *ngIf="readingList" >

    <div class="row mb-2">
      <div class="col-md-2 col-xs-4 col-sm-6 d-none d-sm-block">
        <app-image maxWidth="300px" maxHeight="400px" [imageUrl]="imageService.getReadingListCoverImage(readingList.id)"></app-image>
      </div>
      <div class="col-md-10 col-xs-8 col-sm-6 mt-2">
        <div class="row g-0 mb-3">
          <div class="col-auto me-2">
            <!-- Action row-->
            <div class="btn-group me-3">
              <button type="button" class="btn btn-primary" (click)="continue()">
              <span>
                <i class="fa fa-book-open" aria-hidden="true"></i>
                <span class="read-btn--text">{{t('continue')}}</span>
              </span>
              </button>
              <div class="btn-group" ngbDropdown role="group" [attr.aria-label]="t('read-options-alt')">
                <button type="button" class="btn btn-primary dropdown-toggle-split" ngbDropdownToggle></button>
                <div class="dropdown-menu" ngbDropdownMenu>
                  <button ngbDropdownItem (click)="read()">
                  <span>
                    <i class="fa fa-book" aria-hidden="true"></i>
                    <span class="read-btn--text">&nbsp;{{t('read')}}</span>
                  </span>
                  </button>
                  <button ngbDropdownItem (click)="continue(true)">
                  <span>
                    <i class="fa fa-book-open" aria-hidden="true"></i>
                    <span class="read-btn--text">{{t('continue')}}</span>
                    (<i class="fa fa-glasses ms-1" aria-hidden="true"></i>)
                    <span class="visually-hidden">{{t('incognito-alt')}}</span>
                  </span>
                  </button>
                  <button ngbDropdownItem (click)="read(true)">
                  <span>
                    <i class="fa fa-book" aria-hidden="true"></i>
                    <span class="read-btn--text">&nbsp;{{t('read')}}</span>
                    (<i class="fa fa-glasses ms-1" aria-hidden="true"></i>)
                    <span class="visually-hidden">{{t('incognito-alt')}}</span>
                  </span>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="row g-0 mt-2" *ngIf="readingList.startingYear !== 0">
          <h4 class="reading-list-years">
            <ng-container *ngIf="readingList.startingMonth > 0">{{(readingList.startingMonth +'/01/2020')| date:'MMM'}}</ng-container>
            <ng-container *ngIf="readingList.startingMonth > 0 && readingList.startingYear > 0">, </ng-container>
            <ng-container *ngIf="readingList.startingYear > 0">{{readingList.startingYear}}</ng-container>
            —
            <ng-container *ngIf="readingList.endingYear > 0">
              <ng-container *ngIf="readingList.endingMonth > 0">{{(readingList.endingMonth +'/01/2020') | date:'MMM'}}</ng-container>
              <ng-container *ngIf="readingList.endingMonth > 0 && readingList.endingYear > 0">, </ng-container>
              <ng-container *ngIf="readingList.endingYear > 0">{{readingList.endingYear}}</ng-container>
            </ng-container>

          </h4>
        </div>
        <!-- Summary row-->
        <div class="row g-0 mt-2">
          <app-read-more [text]="readingListSummary" [maxLength]="250"></app-read-more>
        </div>
      </div>
    </div>

    <ng-container *ngIf="characters$ | async as characters">
      <div class="row mb-2">
        <div class="row" *ngIf="characters && characters.length > 0">
          <h5>{{t('characters-title')}}</h5>
          <app-badge-expander [items]="characters">
            <ng-template #badgeExpanderItem let-item let-position="idx">
              <app-person-badge a11y-click="13,32" class="col-auto" [person]="item" (click)="goToCharacter(item)"></app-person-badge>
            </ng-template>
          </app-badge-expander>
        </div>
      </div>
    </ng-container>

    <div class="row mb-1 scroll-container" #scrollingBlock>
      <ng-container *ngIf="items.length === 0 && !isLoading; else loading">
        <div class="mx-auto" style="width: 200px;">
          {{t('no-data')}}
        </div>
      </ng-container>
      <ng-template #loading>
        <app-loading *ngIf="isLoading" [loading]="isLoading"></app-loading>
      </ng-template>

      <app-draggable-ordered-list [items]="items" (orderUpdated)="orderUpdated($event)" [accessibilityMode]="accessibilityMode"
                                  [showRemoveButton]="false">
        <ng-template #draggableItem let-item let-position="idx">
          <app-reading-list-item [ngClass]="{'content-container': items.length < 100, 'non-virtualized-container': items.length >= 100}" [item]="item" [position]="position" [libraryTypes]="libraryTypes"
                                 [promoted]="item.promoted" (read)="readChapter($event)" (remove)="itemRemoved($event, position)"></app-reading-list-item>
        </ng-template>
      </app-draggable-ordered-list>
    </div>
  </div>

</ng-container>
