<ion-item lines="none" *ngIf="course">
    <ion-label class="ion-text-wrap">
        <h3>
            <span class="sr-only">{{ 'core.courses.aria:coursename' | translate }}</span>
            <core-format-text [text]="course.fullname" contextLevel="course" [contextInstanceId]="course.id"></core-format-text>
        </h3>
    </ion-label>
</ion-item>
<ion-item-group *ngFor="let dayEvents of filteredEvents">
    <ion-item lines="none">
        <ion-label>
            <h4 [class.core-bold]="!course">{{ dayEvents.dayTimestamp * 1000 | coreFormatDate:"strftimedaydate" }}</h4>
        </ion-label>
    </ion-item>
    <ng-container *ngFor="let event of dayEvents.events">
        <ion-item class="addon-block-timeline-activity" detail="false" (click)="action($event, event.url)" [attr.aria-label]="event.name"
            button lines="full">
            <ion-label>
                <ion-row class="ion-justify-content-between ion-align-items-center ion-no-padding">
                    <ion-col class="addon-block-timeline-activity-main ion-no-padding">
                        <ion-row class="ion-justify-content-between ion-align-items-center ion-nowrap ion-no-padding">
                            <ion-col class="addon-block-timeline-activity-time ion-no-padding">
                                <ion-badge color="light">{{event.timesort * 1000 | coreFormatDate:"strftimetime24" }}</ion-badge>
                                <core-mod-icon *ngIf="event.iconUrl" [modicon]="event.iconUrl" [componentId]="event.instance"
                                    [modname]="event.modulename">
                                </core-mod-icon>
                            </ion-col>
                            <ion-col class="addon-block-timeline-activity-name ion-no-padding">
                                <p class="item-heading">
                                    <core-format-text [text]="event.activityname || event.name" contextLevel="module"
                                        [contextInstanceId]="event.id" [courseId]="event.course && event.course.id">
                                    </core-format-text>
                                    <ion-badge *ngIf="event.overdue" color="danger">{{ 'addon.block_timeline.overdue' | translate }}
                                    </ion-badge>
                                </p>
                                <p *ngIf="(showCourse && event.course) || event.activitystr">
                                    <span *ngIf="showCourse && event.course">
                                        <core-format-text [text]="event.course.fullnamedisplay" contextLevel="course"
                                            [contextInstanceId]="event.course.id">
                                        </core-format-text> ·
                                    </span>
                                    <core-format-text [text]="event.activitystr" contextLevel="module" [contextInstanceId]="event.id">
                                    </core-format-text>
                                </p>
                            </ion-col>
                        </ion-row>
                    </ion-col>
                    <ion-col class="addon-block-timeline-activity-action ion-no-padding">
                        <ion-button fill="clear" (click)="action($event, event.action.url)" [title]="event.action.name"
                            [disabled]="!event.action.actionable" *ngIf="event.action">
                            {{event.action.name}}
                            <ion-badge slot="end" class="ion-margin-start" *ngIf="event.action.showitemcount">
                                {{event.action.itemcount}}
                            </ion-badge>
                        </ion-button>
                    </ion-col>
                </ion-row>
            </ion-label>
        </ion-item>
    </ng-container>
</ion-item-group>

<div class="ion-padding ion-text-center" *ngIf="canLoadMore && !empty">
    <!-- Button and spinner to show more attempts. -->
    <ion-button expand="block" (click)="loadMoreEvents()" color="light" *ngIf="!loadingMore">
        {{ 'core.loadmore' | translate }}
    </ion-button>
    <ion-spinner *ngIf="loadingMore" [attr.aria-label]="'core.loading' | translate"></ion-spinner>
</div>

<ion-item lines="none" *ngIf="empty && course">
    <ion-label class="ion-text-wrap">
        <p>{{'addon.block_timeline.noevents' | translate}}</p>
    </ion-label>
</ion-item>
<core-empty-box *ngIf="empty && !course" image="assets/img/icons/activities.svg" inline="true"
    [message]="'addon.block_timeline.noevents' | translate"></core-empty-box>