<core-navbar-buttons slot="end" prepend>
    <ion-button *ngIf="searchEnabled" (click)="openSearch()" [attr.aria-label]="'core.courses.searchcourses' | translate">
        <ion-icon name="fas-magnifying-glass" slot="icon-only" aria-hidden="true" />
    </ion-button>
</core-navbar-buttons>
<ion-content>
    <ion-refresher slot="fixed" [disabled]="!dataLoaded" (ionRefresh)="doRefresh($event.target)">
        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
    </ion-refresher>
    <core-loading [hideUntil]="dataLoaded">
        <ion-list class="core-course-module-list-wrapper">
            <!-- Site home main contents. -->
            <ng-container *ngIf="section && section.hasContent">
                <ion-item class="ion-text-wrap section-summary" *ngIf="section.summary">
                    <ion-label>
                        <core-format-text [text]="section.summary" contextLevel="course" [contextInstanceId]="siteHomeId" />
                    </ion-label>
                </ion-item>

                <core-course-module *ngFor="let module of section.modules" [module]="module" [section]="section" />
            </ng-container>

            <!-- Site home items: news, categories, courses, etc. -->
            <ng-container *ngIf="items.length > 0">
                <core-spacer *ngIf="section && section!.hasContent" />
                <ng-container *ngFor="let item of items">
                    <ng-container [ngSwitch]="item">
                        <ng-container *ngSwitchCase="'LIST_OF_COURSE'">
                            <ng-template *ngTemplateOutlet="allCourseList" />
                        </ng-container>
                        <ng-container *ngSwitchCase="'LIST_OF_CATEGORIES'">
                            <ng-template *ngTemplateOutlet="categories" />
                        </ng-container>
                        <ng-container *ngSwitchCase="'COURSE_SEARCH_BOX'">
                            <ng-template *ngTemplateOutlet="courseSearch" />
                        </ng-container>
                        <ng-container *ngSwitchCase="'ENROLLED_COURSES'">
                            <ng-template *ngTemplateOutlet="enrolledCourseList" />
                        </ng-container>
                        <ng-container *ngSwitchCase="'NEWS_ITEMS'">
                            <ng-template *ngTemplateOutlet="news" />
                        </ng-container>
                    </ng-container>
                </ng-container>
            </ng-container>
        </ion-list>
        <core-block-side-blocks-button slot="fixed" *ngIf="hasBlocks" contextLevel="course" [instanceId]="siteHomeId" />

        <core-empty-box *ngIf="!hasContent" icon="fas-box-open" [message]="'core.course.nocontentavailable' | translate" />
    </core-loading>
</ion-content>

<ng-template #allCourseList>
    <ion-card>
        <ion-item button class="ion-text-wrap" (click)="openAvailableCourses()">
            <ion-icon name="fas-graduation-cap" fixed-width slot="start" aria-hidden="true" />
            <ion-label>
                <p class="item-heading">{{ 'core.courses.availablecourses' | translate}}</p>
            </ion-label>
        </ion-item>
    </ion-card>
</ng-template>

<ng-template #news>
    <core-course-module class="core-sitehome-news" *ngIf="newsForumModule" [module]="newsForumModule" />
</ng-template>

<ng-template #categories>
    <ion-card>
        <ion-item button class="ion-text-wrap" (click)="openCourseCategories()">
            <ion-icon name="far-folder" slot="start" aria-hidden="true" />
            <ion-label>
                <p class="item-heading">{{ 'core.courses.categories' | translate}}</p>
            </ion-label>
        </ion-item>
    </ion-card>
</ng-template>

<ng-template #enrolledCourseList>
    <ion-card>
        <ion-item button class="ion-text-wrap" (click)="openMyCourses()">
            <ion-icon name="fas-graduation-cap" fixed-width slot="start" aria-hidden="true" />
            <ion-label>
                <p class="item-heading">{{ 'core.courses.mycourses' | translate}}</p>
            </ion-label>
        </ion-item>
    </ion-card>
</ng-template>

<ng-template #courseSearch>
    <ion-card>
        <ion-item button class="ion-text-wrap" (click)="openSearch()">
            <ion-icon name="fas-magnifying-glass" slot="start" aria-hidden="true" />
            <ion-label>
                <p class="item-heading">{{ 'core.courses.searchcourses' | translate}}</p>
            </ion-label>
        </ion-item>
    </ion-card>
</ng-template>
