<ng-container *transloco="let t; prefix: 'view-annotations-drawer'">

  <app-off-canvas-resize
    [resizeMode]="ResizeMode.Width"
    canvasPosition="end"
    [minWidth]="200"
    [maxWidth]="window.innerWidth*0.9"
  />

  <div class="offcanvas-header">
    <h5 class="offcanvas-title">
      {{t('title')}}
    </h5>
    <button type="button" class="btn-unstyled ms-auto" [attr.aria-label]="t('close')" (click)="close()">
      <i class="fas fa-times"></i>
    </button>
  </div>

  <div class="offcanvas-body">
    <form [formGroup]="formGroup">
      @if (annotations().length > FilterAfter) {
        <div class="row g-0 mb-3">
          <div class="col-md-12">
            <label for="filter" class="visually-hidden">{{t('filter-label')}}</label>
            <div class="input-group">
              <input id="filter" type="text" class="form-control" [placeholder]="t('filter-label')" formControlName="filter" />
            </div>
          </div>
        </div>
      }

      @let filteredAnnotations = annotations() | filter: filterList;

      @if (filteredAnnotations.length > 8) {
        <virtual-scroller
          #scroll
          [items]="filteredAnnotations"
        >
          <div #container>
            @for (annotation of scroll.viewPortItems; track annotation.id) {
              <app-annotation-card
                [annotation]="annotation"
                [allowEdit]="annotation.ownerUserId === accountService.currentUser()!.id"
                (delete)="handleDelete(annotation)"
                (navigate)="handleNavigateTo($event)"
                [forceSize]="false"
                [inBookReader]="true"
              />
            }
          </div>
        </virtual-scroller>
      } @else {
        @for (annotation of filteredAnnotations; track annotation.id) {
          <app-annotation-card
            [annotation]="annotation"
            [allowEdit]="annotation.ownerUserId === accountService.currentUser()!.id"
            (delete)="handleDelete(annotation)"
            (navigate)="handleNavigateTo($event)"
            [forceSize]="false"
            [inBookReader]="true"
          />
        } @empty {
          <p>{{t('no-data')}}</p>
        }
      }
    </form>
  </div>
</ng-container>
