<ng-container *transloco="let t; prefix: 'personal-table-of-contents'">
  <div class="table-of-contents">
    @let bookmarks = ptocBookmarks();

    @if(bookmarks.length >= ShowFilterAfterItems) {
      <form [formGroup]="formGroup">
        <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>
      </form>
    }

    @for(bookmark of bookmarks | filter: filterList; track bookmark.id) {
      <div class="mb-2">
        <app-text-bookmark-item [bookmark]="bookmark"
                                (loadBookmark)="loadChapterPage($event.pageNumber, $event.bookScrollId)"
                                (removeBookmark)="removeBookmark($event)" />
      </div>
    } @empty {
      <div>
        @if (formGroup.get('filter')?.value) {
          <em>{{t('no-match')}}</em>
        } @else {
          <em>{{t('no-data')}}</em>
        }

      </div>
    }

  </div>
</ng-container>
