<ion-item-divider sticky="true">
    <ion-label>
        <h2>{{ 'addon.block_myoverview.pluginname' | translate }}</h2>
    </ion-label>
    <div slot="end" class="flex-row">
        <!-- Download all courses. -->
        <div *ngIf="downloadCoursesEnabled && filteredCourses.length > 0" class="core-button-spinner">
            <ion-button *ngIf="!prefetchCoursesData.loading" fill="clear" (click)="prefetchCourses()"
                [attr.aria-label]="prefetchCoursesData.statusTranslatable | translate">
                <ion-icon [name]="prefetchCoursesData.icon" slot="icon-only" aria-hidden="true">
                </ion-icon>
            </ion-button>
            <ion-badge class="core-course-download-courses-progress" *ngIf="prefetchCoursesData.badge" role="progressbar"
                [attr.aria-valuemax]="prefetchCoursesData.total" [attr.aria-valuenow]="prefetchCoursesData.count"
                [attr.aria-valuetext]="prefetchCoursesData.badgeA11yText">
                {{prefetchCoursesData.badge}}
            </ion-badge>
            <ion-spinner *ngIf="prefetchCoursesData.loading" [attr.aria-label]="'core.loading' | translate">
            </ion-spinner>
        </div>
    </div>
</ion-item-divider>
<core-loading [hideUntil]="loaded" [fullscreen]="false">

    <ion-row class="ion-justify-content-between ion-align-items-center addon-block-myoverview-filter" *ngIf="hasCourses">
        <ion-col size="auto" *ngIf="filters.enabled">
            <core-combobox interface="modal" [label]="'core.courses.filtermycourses' | translate" (onChange)="filterOptionsChanged($event)"
                icon="fas-filter" [badge]="filters.count" [modalOptions]="filterModalOptions">
            </core-combobox>
        </ion-col>
        <ion-col>
            <!-- Filter courses. -->
            <ion-searchbar class="ion-hide-md-down" [(ngModel)]="textFilter" (ionInput)="filterTextChanged($event.target)"
                (ionCancel)="filterTextChanged($event.target)" [placeholder]="'core.filter' | translate">
            </ion-searchbar>
        </ion-col>
        <ion-col size="auto" *ngIf="sort.enabled">
            <core-combobox [label]="'core.sortby' | translate" [selection]="sort.selected" (onChange)="sortCourses($event)"
                icon="fas-sort-amount-down-alt">
                <ion-select-option class="ion-text-wrap" value="fullname">
                    {{'addon.block_myoverview.title' | translate}}
                </ion-select-option>
                <ion-select-option class="ion-text-wrap" value="shortname" *ngIf="sort.shortnameEnabled">
                    {{'addon.block_myoverview.shortname' | translate}}
                </ion-select-option>
                <ion-select-option class="ion-text-wrap" value="lastaccess">
                    {{'addon.block_myoverview.lastaccessed' | translate}}
                </ion-select-option>
            </core-combobox>
        </ion-col>
        <ion-col size="auto" *ngIf="isLayoutSwitcherAvailable">
            <ion-button *ngIf="layout == 'card'" fill="outline" (click)="toggleLayout('list')"
                [attr.aria-label]="'addon.block_myoverview.list' | translate">
                <ion-icon slot="icon-only" name="fas-list"></ion-icon>
            </ion-button>
            <ion-button *ngIf="layout == 'list'" fill="outline" (click)="toggleLayout('card')"
                [attr.aria-label]="'addon.block_myoverview.card' | translate">
                <ion-icon slot="icon-only" name="fas-th"></ion-icon>
            </ion-button>
        </ion-col>
    </ion-row>
    <ion-row class="ion-hide-md-up addon-block-myoverview-filter" *ngIf="hasCourses">
        <ion-col>
            <!-- Filter courses. -->
            <ion-searchbar [(ngModel)]="textFilter" (ionInput)="filterTextChanged($event.target)"
                (ionCancel)="filterTextChanged($event.target)" [placeholder]="'core.filter' | translate">
            </ion-searchbar>
        </ion-col>
    </ion-row>

    <core-empty-box *ngIf="filteredCourses.length == 0" image="assets/img/icons/courses.svg"
        [message]="'addon.block_myoverview.nocourses' | translate" inline="true">
    </core-empty-box>

    <!-- List of courses. -->
    <div class="safe-area-padding" *ngIf="hasCourses">
        <ion-grid class="ion-no-padding" [class.core-no-grid]="layout != 'card'" [class.list-item-limited-width]="layout != 'card'">
            <ion-row class="ion-no-padding">
                <ion-col *ngFor="let course of filteredCourses" class="ion-no-padding" size="12" size-sm="6" size-md="6" size-lg="4"
                    size-xl="3">
                    <core-courses-course-list-item [course]="course" class="core-courseoverview" [showDownload]="downloadCourseEnabled"
                        [layout]="layout">
                    </core-courses-course-list-item>
                </ion-col>
            </ion-row>
        </ion-grid>
    </div>
</core-loading>
