<!-- Buttons to add to the header. -->
<core-navbar-buttons end>
     <button [hidden]="!loaded || !showFilterSwitchButton()" ion-button icon-only [attr.aria-label]="'core.courses.filtermycourses' | translate" (click)="switchFilter()">
        <ion-icon name="funnel"></ion-icon>
    </button>
</core-navbar-buttons>

<ion-item-divider color="light">
    <h2>{{ 'addon.block_myoverview.pluginname' | translate }}</h2>
</ion-item-divider>
<core-loading [hideUntil]="loaded" class="core-loading-center">
    <div padding ion-row justify-content-end [hidden]="showFilter">
        <!-- "Time" selector. -->
        <ion-col [hidden]="!showSelectorFilter">
            <ion-select text-start [title]="'core.show' | translate" [(ngModel)]="selectedFilter" ion-col (ngModelChange)="selectedChanged()" interface="popover" class="core-button-select">
                <ion-option value="all">{{ 'addon.block_myoverview.all' | translate }}</ion-option>∫
                <ion-option value="inprogress">{{ 'addon.block_myoverview.inprogress' | translate }}</ion-option>
                <ion-option value="future">{{ 'addon.block_myoverview.future' | translate }}</ion-option>
                <ion-option value="past">{{ 'addon.block_myoverview.past' | translate }}</ion-option>
                <ion-option value="favourite" *ngIf="showFavourite">{{ 'addon.block_myoverview.favourites' | translate }}</ion-option>
                <ion-option value="hidden" *ngIf="showHidden">{{ 'addon.block_myoverview.hiddencourses' | translate }}</ion-option>
            </ion-select>
        </ion-col>
        <!-- "Sort" selector. -->
        <ion-col [hidden]="!showSortFilter">
            <ion-select text-start [(ngModel)]="sort" (ngModelChange)="switchSort()" interface="popover" class="core-button-select">
                <ion-option value="title">{{ 'addon.block_myoverview.title' | translate }}</ion-option>
                <ion-option value="lastaccess">{{ 'addon.block_myoverview.lastaccessed' | translate }}</ion-option>
            </ion-select>
        </ion-col>
        <!-- Download all courses. -->
        <ion-col *ngIf="downloadAllCoursesEnabled && courses[selectedFilter] && courses[selectedFilter].length > 1" class="core-button-spinner" text-end col-1>
            <button *ngIf="prefetchCoursesData[selectedFilter].icon && prefetchCoursesData[selectedFilter].icon != 'spinner'" ion-button icon-only clear color="dark" (click)="prefetchCourses()">
                <core-icon [name]="prefetchCoursesData[selectedFilter].icon"></core-icon>
            </button>
            <ion-badge class="core-course-download-courses-progress" *ngIf="prefetchCoursesData[selectedFilter].badge">{{prefetchCoursesData[selectedFilter].badge}}</ion-badge>
            <ion-spinner *ngIf="!prefetchCoursesData[selectedFilter].icon || prefetchCoursesData[selectedFilter].icon == 'spinner'"></ion-spinner>
        </ion-col>
    </div>
    <core-empty-box *ngIf="courses[selectedFilter].length == 0" image="assets/img/icons/courses.svg" [message]="'addon.block_myoverview.nocourses' | translate"></core-empty-box>

    <!-- Filter courses. -->
    <ion-searchbar #searchbar *ngIf="showFilter" [(ngModel)]="courses.filter" (ionInput)="filterChanged($event)" (ionCancel)="filterChanged()" [placeholder]="'core.courses.filtermycourses' | translate">
    </ion-searchbar>
    <!-- List of courses. -->
    <div>
        <ion-grid no-padding>
            <ion-row no-padding>
                <ion-col *ngFor="let course of filteredCourses" no-padding col-12 col-sm-6 col-md-6 col-lg-4 col-xl-4 align-self-stretch>
                    <core-courses-course-progress [course]="course" class="core-courseoverview"></core-courses-course-progress>
                </ion-col>
            </ion-row>
        </ion-grid>
    </div>
</core-loading>
