<ion-item-divider sticky="true">
    <ion-label><h2>{{ 'addon.block_recentlyaccesseditems.pluginname' | translate }}</h2></ion-label>
</ion-item-divider>
<core-loading [hideUntil]="loaded" class="core-loading-center safe-area-page">
    <div class="core-horizontal-scroll" *ngIf="items && items.length > 0">
        <div *ngFor="let item of items">
            <ion-card>
                <ion-item class="core-course-module-handler item-media ion-text-wrap" detail="false" (click)="action($event, item)"
                    button>
                    <img slot="start" [src]="item.iconUrl" alt="" role="presentation" *ngIf="item.iconUrl" class="core-module-icon">
                    <ion-label>
                        <!-- Add the icon title so accessibility tools read it. -->
                        <span class="sr-only" *ngIf="item.iconTitle">{{ item.iconTitle }}</span>
                        <h2>
                            <core-format-text [text]="item.name" contextLevel="module" [contextInstanceId]="item.cmid"
                                [courseId]="item.courseid"></core-format-text>
                        </h2>
                        <p>
                            <core-format-text [text]="item.coursename" contextLevel="course" [contextInstanceId]="item.courseid">
                            </core-format-text>
                        </p>
                    </ion-label>
                </ion-item>
            </ion-card>
        </div>
    </div>

    <core-empty-box *ngIf="items.length <= 0" image="assets/img/icons/activities.svg"
        [message]="'addon.block_recentlyaccesseditems.noitems' | translate"></core-empty-box>

</core-loading>
