<div padding>
    <core-course-module-description [description]="module && module.description"></core-course-module-description>
    <h2 *ngIf="!isDisabledInSite && isSupportedByTheApp">{{ 'core.whoops' | translate }}</h2>
    <h2 *ngIf="isDisabledInSite || !isSupportedByTheApp">{{ 'core.uhoh' | translate }}</h2>

    <p class="core-big" *ngIf="isDisabledInSite">{{ 'core.course.activitydisabled' | translate }}</p>
    <p class="core-big" *ngIf="!isDisabledInSite && isSupportedByTheApp">{{ 'core.course.activitynotyetviewablesiteupgradeneeded' | translate }}</p>
    <p class="core-big" *ngIf="!isDisabledInSite && !isSupportedByTheApp">{{ 'core.course.activitynotyetviewableremoteaddon' | translate }}</p>
    <p *ngIf="isDisabledInSite || !isSupportedByTheApp"><strong>{{ 'core.course.askadmintosupport' | translate }}</strong></p>

    <div *ngIf="module && module.url">
        <p><strong>{{ 'core.course.useactivityonbrowser' | translate }}</strong></p>
        <a ion-button block icon-end [href]="module.url" core-link>
            {{ 'core.openinbrowser' | translate }}
            <ion-icon name="open"></ion-icon>
        </a>
    </div>
</div>