<ion-header>
    <ion-navbar core-back-button>
        <ion-title><core-format-text [text]="title"></core-format-text></ion-title>

        <ion-buttons end></ion-buttons>
    </ion-navbar>
</ion-header>
<ion-content>
    <core-tabs>
        <!-- Course contents tab. -->
        <core-tab [title]="'core.course.contents' | translate">
            <ng-template>
                <core-navbar-buttons>
                    <core-context-menu>
                        <core-context-menu-item *ngIf="displayEnableDownload" [priority]="2000" [content]="'core.settings.showdownloadoptions' | translate" (action)="toggleDownload()" [iconAction]="downloadEnabledIcon"></core-context-menu-item>
                        <core-context-menu-item [hidden]="!downloadCourseEnabled" [priority]="1900" [content]="prefetchCourseData.title | translate" (action)="prefetchCourse()" [iconAction]="prefetchCourseData.prefetchCourseIcon" [closeOnClick]="false"></core-context-menu-item>
                        <core-context-menu-item [priority]="1800" [content]="'core.course.coursesummary' | translate" (action)="openCourseSummary()" iconAction="fa-graduation-cap"></core-context-menu-item>
                        <core-context-menu-item *ngFor="let item of courseMenuHandlers" [priority]="item.priority" (action)="openMenuItem(item)" [content]="item.data.title | translate" [iconAction]="item.data.icon" [class]="item.data.class"></core-context-menu-item>
                    </core-context-menu>
                </core-navbar-buttons>
                <ion-content #courseSectionContent>
                    <ion-refresher [enabled]="dataLoaded && displayRefresher" (ionRefresh)="doRefresh($event)">
                        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
                    </ion-refresher>

                    <core-loading [hideUntil]="dataLoaded">
                        <core-course-format [course]="course" [sections]="sections" [initialSectionId]="sectionId" [initialSectionNumber]="sectionNumber" [downloadEnabled]="downloadEnabled" [moduleId]="moduleId" (completionChanged)="onCompletionChange($event)"></core-course-format>
                    </core-loading>
                </ion-content>
            </ng-template>
        </core-tab>
        <!-- One tab per handler. -->
        <core-tab *ngFor="let handler of courseHandlers" [title]="handler.data.title | translate" class="{{handler.data.class}}">
            <ng-template>
                <core-dynamic-component [component]="handler.data.component" [data]="handler.data.componentData"></core-dynamic-component>
            </ng-template>
        </core-tab>
    </core-tabs>
</ion-content>
