<ion-item-divider sticky="true">
    <ion-label>
        <h2>{{ 'addon.block_timeline.pluginname' | translate }}</h2>
    </ion-label>
</ion-item-divider>
<core-loading [hideUntil]="loaded">
    <ion-row class="ion-hide-md-up addon-block-timeline-filter" *ngIf="searchEnabled">
        <ion-col>
            <!-- Filter courses. -->
            <core-search-box (onSubmit)="searchTextChanged($event)" (onClear)="searchTextChanged()"
                [placeholder]="'addon.block_timeline.searchevents' | translate" autocorrect="off" spellcheck="false" lengthCheck="2"
                searchArea="AddonBlockTimeline"></core-search-box>
        </ion-col>
    </ion-row>
    <ion-row class="ion-justify-content-between ion-align-items-center addon-block-timeline-filter">
        <ion-col size="auto">
            <core-combobox [selection]="filter" (onChange)="switchFilter($event)">
                <ion-select-option class="ion-text-wrap" value="all">
                    {{ 'core.all' | translate }}
                </ion-select-option>
                <ion-select-option class="ion-text-wrap core-select-option-border-bottom" value="overdue">
                    {{ 'addon.block_timeline.overdue' | translate }}
                </ion-select-option>
                <ion-select-option class="ion-text-wrap core-select-option-title" disabled value="disabled">
                    {{ 'addon.block_timeline.duedate' | translate }}
                </ion-select-option>
                <ion-select-option class="ion-text-wrap" value="next7days">
                    {{ 'addon.block_timeline.next7days' | translate }}
                </ion-select-option>
                <ion-select-option class="ion-text-wrap" value="next30days">
                    {{ 'addon.block_timeline.next30days' | translate }}
                </ion-select-option>
                <ion-select-option class="ion-text-wrap" value="next3months">
                    {{ 'addon.block_timeline.next3months' | translate }}
                </ion-select-option>
                <ion-select-option class="ion-text-wrap" value="next6months">
                    {{ 'addon.block_timeline.next6months' | translate }}
                </ion-select-option>
            </core-combobox>
        </ion-col>
        <ion-col class="ion-hide-md-down" *ngIf="searchEnabled">
            <!-- Filter courses. -->
            <core-search-box (onSubmit)="searchTextChanged($event)" (onClear)="searchTextChanged()"
                [placeholder]="'addon.block_timeline.searchevents' | translate" autocorrect="off" spellcheck="false" lengthCheck="2"
                searchArea="AddonBlockTimeline"></core-search-box>
        </ion-col>
        <ion-col size="auto">
            <core-combobox [label]="'core.sortby' | translate" [selection]="sort" (onChange)="switchSort($event)"
                icon="fas-sort-amount-down-alt">
                <ion-select-option class="ion-text-wrap" value="sortbydates">
                    {{'addon.block_timeline.sortbydates' | translate}}
                </ion-select-option>
                <ion-select-option class="ion-text-wrap" value="sortbycourses">
                    {{'addon.block_timeline.sortbycourses' | translate}}
                </ion-select-option>
            </core-combobox>
        </ion-col>
    </ion-row>


    <core-loading [hideUntil]="timeline.loaded" [hidden]="sort != 'sortbydates'">
        <addon-block-timeline-events [events]="timeline.events" [canLoadMore]="timeline.canLoadMore" (loadMore)="loadMore()"
            [from]="dataFrom" [to]="dataTo"></addon-block-timeline-events>
    </core-loading>
    <core-loading [hideUntil]="timelineCourses.loaded" [hidden]="sort != 'sortbycourses'">
        <ng-container *ngFor="let course of timelineCourses.courses">
            <addon-block-timeline-events [events]="course.events" [canLoadMore]="course.canLoadMore" (loadMore)="loadMore(course)"
                [course]="course" [from]="dataFrom" [to]="dataTo"></addon-block-timeline-events>
        </ng-container>
        <core-empty-box *ngIf="timelineCourses.courses.length == 0" image="assets/img/icons/courses.svg"
            [message]="'addon.block_timeline.noevents' | translate"></core-empty-box>
    </core-loading>
</core-loading>
