<ion-header>
    <ion-toolbar>
        <ion-title>{{ 'addon.mod_book.toc' | translate }}</ion-title>
        <ion-buttons slot="end">
            <ion-button (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                <ion-icon name="fas-times" slot="icon-only" aria-hidden=true></ion-icon>
            </ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content>
    <nav>
        <ion-list>
            <ion-item class="ion-text-wrap" *ngFor="let chapter of chapters" (click)="loadChapter(chapter.id)"
                [attr.aria-current]="selected == chapter.id ? 'page' :  'false'" button
                [class.item-dimmed]="chapter.hidden">
                <ion-label>
                    <p [class.ion-padding-left]="addPadding && chapter.level == 1 ? true : null">
                        <span *ngIf="showNumbers" class="addon-mod-book-number">{{chapter.indexNumber}}</span>
                        <span *ngIf="showBullets" class="addon-mod-book-bullet">&bull;</span>
                        <core-format-text [text]="chapter.title" contextLevel="module" [contextInstanceId]="moduleId"
                            [courseId]="courseId">
                        </core-format-text>
                    </p>
                </ion-label>
            </ion-item>
        </ion-list>
    </nav>
</ion-content>