<ion-item *ngIf="module && module.handlerData && module.visibleoncoursepage !== 0 && !module.handlerData.loading"
    id="core-course-module-{{module.id}}" class="ion-text-wrap core-course-module-handler {{module.handlerData.class}}"
    (click)="moduleClicked($event)" [attr.aria-label]="module.handlerData.a11yTitle" detail="false"
    [ngClass]="{'item-media': module.handlerData.icon, 'item-dimmed': module.visible === 0 || module.uservisible === false,
    'core-not-clickable': !module.handlerData.action || module.uservisible === false}"
    [button]="module.handlerData.action || module.uservisible">

    <img slot="start" *ngIf="module.handlerData.icon" [src]="module.handlerData.icon" [alt]="modNameTranslated"
        class="core-module-icon">

    <ion-label>
        <div class="core-module-title">
            <core-format-text [text]="module.handlerData.title" contextLevel="module" [contextInstanceId]="module.id"
                [courseId]="courseId" [attr.aria-label]="module.handlerData.a11yTitle + ', ' + modNameTranslated">
            </core-format-text>

            <!-- Buttons. -->
            <div slot="end" *ngIf="module.uservisible !== false" class="buttons core-module-buttons"
                [ngClass]="{'core-button-completion': module.completiondata}">
                <!-- Module completion. -->
                <core-course-module-completion *ngIf="module.completiondata" [completion]="module.completiondata"
                    [moduleName]="module.name" [moduleId]="module.id" (completionChanged)="completionChanged.emit($event)">
                </core-course-module-completion>

                <div class="core-module-buttons-more">
                    <core-download-refresh [status]="downloadStatus" [enabled]="downloadEnabled"
                        [canTrustDownload]="canCheckUpdates" [loading]="spinner || module.handlerData.spinner"
                        (action)="download($event)">
                    </core-download-refresh>

                    <!-- Buttons defined by the module handler. -->
                    <ion-button fill="clear" *ngFor="let button of module.handlerData.buttons" color="dark"
                        [hidden]="button.hidden || spinner || 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>
        </div>

        <div class="core-module-more-info">
            <ion-badge slot="end" *ngIf="module.handlerData.extraBadge" [color]="module.handlerData.extraBadgeColor"
                class="ion-text-wrap ion-text-start">
                <span [innerHTML]="module.handlerData.extraBadge"></span>
            </ion-badge>
            <ion-badge slot="end" *ngIf="module.visible === 0 && (!section || section.visible)" class="ion-text-wrap">
                {{ 'core.course.hiddenfromstudents' | translate }}
            </ion-badge>
            <ion-badge slot="end" *ngIf="module.visible !== 0 && module.isStealth" class="ion-text-wrap">
                {{ 'core.course.hiddenoncoursepage' | translate }}
            </ion-badge>
            <div class="core-module-availabilityinfo" *ngIf="module.availabilityinfo" slot="end">
                <ion-badge class="ion-text-wrap">{{ 'core.restricted' | translate }}</ion-badge>
                <core-format-text [text]="module.availabilityinfo" contextLevel="module" [contextInstanceId]="module.id"
                    [courseId]="courseId" class="ion-text-wrap">
                </core-format-text>
            </div>
            <ion-badge slot="end" *ngIf="module.completiondata?.offline" color="warning" class="ion-text-wrap">
                {{ 'core.course.manualcompletionnotsynced' | translate }}
            </ion-badge>
        </div>

        <core-format-text class="core-module-description" *ngIf="module.description" maxHeight="80" [text]="module.description"
            contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
        </core-format-text>
    </ion-label>
</ion-item>

<!-- Loading. -->
<ion-item *ngIf="module && module.handlerData && module.visibleoncoursepage !== 0 && 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></ion-spinner></ion-label>
</ion-item>
