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

    @if (bookChapters.length === 0) {

      @if (loading()) {
        <app-loading [loading]="true" />
      } @else {
        <div>
          <em>{{t('no-data')}}</em>
        </div>
      }

    } @else if (isDisplayingChildrenOnly()) {
      <div>
        <ul>
          @for(chapter of displayedChapters(); track chapter.title) {
            <li [id]="`${$index}`" class="{{isChapterSelected(chapter) ? 'active': ''}}">
              <a href="javascript:void(0);" (click)="loadChapterPage(chapter.page, chapter.part)">{{chapter.title}}</a>
            </li>
          }
        </ul>
      </div>
    } @else {
      @for (chapterGroup of displayedChapters(); track chapterGroup.title + chapterGroup.children.length) {
        <ul [id]="`${$index}`" class="chapter-title">
          <li class="{{isChapterSelected(chapterGroup) ? 'active': ''}}" (click)="loadChapterPage(chapterGroup.page, '')">
            {{chapterGroup.title}}
          </li>
          @for(chapter of chapterGroup.children; track chapter.title + chapter.part) {
            <ul>
              <li class="{{isAnchorSelected(chapter) ? 'active' : ''}}">
                <a href="javascript:void(0);" (click)="loadChapterPage(chapter.page, chapter.part)">{{chapter.title}}</a>
              </li>
            </ul>
          }
        </ul>
      }

    }

  </div>
</ng-container>
