<ion-card *ngIf="module.handlerData && module.visibleoncoursepage !== 0" [class.core-course-module-with-view]="moduleHasView"
    (click)="moduleClicked($event)" [button]="module.handlerData.action && module.uservisible"
    [attr.aria-label]="module.handlerData.a11yTitle ? module.handlerData.a11yTitle : null">
    <ng-container *ngIf="!module.handlerData.loading">
        <ion-item id="core-course-module-{{module.id}}"
            class="ion-text-wrap core-course-module-handler core-module-main-item {{module.handlerData.class}}" [ngClass]="{
                'item-dimmed': module.visible === 0 || module.uservisible === false
            }">

            <core-mod-icon slot="start" *ngIf="module.handlerData.icon" [modicon]="module.handlerData.icon" [modname]="module.modname"
                [componentId]="module.instance" [fallbackTranslation]="module.modplural">
            </core-mod-icon>

            <ion-label class="core-module-title">
                <p class="item-heading">
                    <core-format-text [text]="module.handlerData.title" contextLevel="module" [contextInstanceId]="module.id"
                        [courseId]="module.course" [attr.aria-label]="module.handlerData.a11yTitle + ', ' + modNameTranslated">
                    </core-format-text>
                    <ion-icon name="fas-lock" *ngIf="module.visible === 0 || module.uservisible === false"
                        [attr.aria-label]="'core.restricted' | translate"></ion-icon>
                    <ion-icon *ngIf="prefetchStatusIcon$ | async as prefetchStatusIcon" [name]="prefetchStatusIcon" color="success"
                        [attr.aria-label]="((prefetchStatusText$ | async) || '') | translate"></ion-icon>
                </p>

                <div class="core-module-additional-info">
                    <!-- Basic module completion. -->
                    <core-course-module-completion *ngIf="module.completiondata && module.uservisible && !showLegacyCompletion"
                        [completion]="module.completiondata" [moduleName]="module.name" [moduleId]="module.id"
                        [showCompletionConditions]="showCompletionConditions" [showManualCompletion]="showManualCompletion"
                        (completionChanged)="completionChanged.emit($event)" mode="basic">
                    </core-course-module-completion>

                    <ion-chip *ngIf="module.handlerData.extraBadge" [color]="module.handlerData.extraBadgeColor"
                        class="ion-text-wrap ion-text-start" [outline]="true">
                        <ion-label><span [innerHTML]="module.handlerData.extraBadge"></span></ion-label>
                    </ion-chip>

                    <!-- Hidden badges -->
                    <ion-badge color="warning" *ngIf="module.visible === 0" class="ion-text-wrap">
                        {{ 'core.course.hiddenfromstudents' | translate }}
                    </ion-badge>
                    <ion-badge color="warning" *ngIf="module.visible !== 0 && module.isStealth" class="ion-text-wrap">
                        {{ 'core.course.hiddenoncoursepage' | translate }}
                    </ion-badge>
                </div>
            </ion-label>
            <!-- Buttons. -->
            <div slot="end" *ngIf="module.uservisible !== false" class="buttons core-module-buttons"
                [ngClass]="{'core-button-completion': module.completiondata && showLegacyCompletion}">
                <!-- Module completion (legacy). -->
                <core-course-module-completion-legacy *ngIf="module.completiondata && showLegacyCompletion"
                    [completion]="module.completiondata" [moduleName]="module.name" [moduleId]="module.id"
                    (completionChanged)="completionChanged.emit($event)">
                </core-course-module-completion-legacy>

                <div class="core-module-buttons-more">
                    <!-- Buttons defined by the module handler. -->
                    <ion-button fill="clear" *ngFor="let button of module.handlerData.buttons"
                        [hidden]="button.hidden || module.handlerData.spinner" class="core-animate-show-hide"
                        (click)="buttonClicked($event, button)" [attr.aria-label]="button.label | translate:{$a: module.handlerData.title}">
                        <ion-icon [name]="button.icon" slot="icon-only" aria-hidden="true"></ion-icon>
                    </ion-button>
                </div>
            </div>
        </ion-item>
        <ion-item *ngIf="hasInfo" id="core-course-module-{{module.id}}-info" detail="false"
            class="ion-text-wrap core-course-module-handler core-course-module-info {{module.handlerData.class}}" [ngClass]="{
                'item-dimmed': module.visible === 0 || module.uservisible === false
            }">
            <ion-label [collapsible-item]="64">
                <core-format-text class="core-module-description" *ngIf="module.description" [text]="module.description"
                    contextLevel="module" [contextInstanceId]="module.id" [courseId]="module.course">
                </core-format-text>

                <!-- Module completion. Only auto conditions-->
                <core-course-module-completion *ngIf="autoCompletionTodo && module.uservisible && !showLegacyCompletion"
                    [completion]="module.completiondata" [moduleName]="module.name" [moduleId]="module.id"
                    [showCompletionConditions]="showCompletionConditions">
                </core-course-module-completion>

                <div class="core-module-dates-availabilityinfo"
                    *ngIf="(showActivityDates && module.dates && module.dates.length) || module.availabilityinfo">
                    <!-- Activity dates. -->
                    <div *ngIf="showActivityDates && module.dates && module.dates.length" class="core-module-dates">
                        <core-reminders-date *ngFor="let date of module.dates" [type]="date.id" [label]="date.label" [time]="date.timestamp"
                            [relativeTo]="date.relativeto">
                        </core-reminders-date>
                    </div>

                    <!-- Availability info -->
                    <div *ngIf="module.availabilityinfo" class="core-module-availabilityinfo">
                        <ion-icon name="fas-lock" [attr.aria-label]="'core.restricted' | translate"></ion-icon>
                        <core-format-text [text]="module.availabilityinfo" contextLevel="module" [contextInstanceId]="module.id"
                            [courseId]="module.course">
                        </core-format-text>
                    </div>
                </div>

            </ion-label>
        </ion-item>

        <div class="core-course-last-module-viewed" *ngIf="isLastViewed">
            <ion-icon name="fas-eye" aria-hidden="true"></ion-icon>
            {{ 'core.course.lastaccessedactivity' | translate }}
        </div>
    </ng-container>

    <!-- Loading. -->
    <ion-item *ngIf="module.handlerData.loading" role="status" class="ion-text-wrap" id="core-course-module-{{module.id}}"
        [attr.aria-label]="module.handlerData.a11yTitle"
        [ngClass]="['core-course-module-handler', 'core-module-loading', module.handlerData.class]" detail="false">
        <ion-label>
            <ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner>
        </ion-label>
    </ion-item>
</ion-card>
