<!-- Buttons to add to the header. -->
<core-navbar-buttons slot="end">
    <core-context-menu>
        <core-context-menu-item *ngIf="externalUrl" [priority]="900" [content]="'core.openinbrowser' | translate"
            [href]="externalUrl" iconAction="fas-external-link-alt">
        </core-context-menu-item>
        <core-context-menu-item *ngIf="description" [priority]="800" [content]="'core.moduleintro' | translate"
            (action)="expandDescription()" iconAction="fas-arrow-right">
        </core-context-menu-item>
        <core-context-menu-item *ngIf="blog" [priority]="750" content="{{'addon.blog.blog' | translate}}"
            iconAction="far-newspaper" (action)="gotoBlog()">
        </core-context-menu-item>
        <core-context-menu-item *ngIf="loaded && !hasOffline && isOnline" [priority]="700" [content]="'core.refresh' | translate"
            (action)="doRefresh(null, $event)" [iconAction]="refreshIcon" [closeOnClick]="false">
        </core-context-menu-item>
        <core-context-menu-item *ngIf="loaded && hasOffline && isOnline"  [priority]="600"
            [content]="'core.settings.synchronizenow' | translate" (action)="doRefresh(null, $event, true)" [iconAction]="syncIcon"
            [closeOnClick]="false">
        </core-context-menu-item>
        <core-context-menu-item *ngIf="prefetchStatusIcon" [priority]="500" [content]="prefetchText" (action)="prefetch($event)"
            [iconAction]="prefetchStatusIcon" [closeOnClick]="false">
        </core-context-menu-item>
        <core-context-menu-item *ngIf="size" [priority]="200" [content]="'core.clearstoreddata' | translate:{$a: size}"
            iconDescription="fas-archive" (action)="removeFiles($event)" iconAction="fas-trash" [closeOnClick]="false">
        </core-context-menu-item>    </core-context-menu>
</core-navbar-buttons>

<!-- Content. -->
<core-loading [hideUntil]="loaded" class="core-loading-center">
    <ion-card class="with-borders" *ngIf="phases">
        <ion-item button (click)="viewPhaseInfo()" detail="true">
            <ion-label>
                <h2 class="ion-text-wrap">{{ phases[workshop!.phase].title }}</h2>
            </ion-label>
        </ion-item>
        <ng-container *ngIf="phases && phases[workshop!.phase] && phases[workshop!.phase].tasks &&
            phases[workshop!.phase].tasks.length">
            <ion-item button class="ion-text-wrap" *ngFor="let task of phases[workshop!.phase].tasks"
                [class.item-dimmed]="task.code == 'submit' && !showSubmit" (click)="runTask(task)" detail="false">
                <ion-icon slot="start" name="far-circle" *ngIf="task.completed == null" aria-hidden="true"></ion-icon>
                <ion-icon slot="start" name="fas-times-circle" color="danger" *ngIf="task.completed == ''" aria-hidden="true">
                </ion-icon>
                <ion-icon slot="start" name="fas-info-circle" color="info" *ngIf="task.completed == 'info'" aria-hidden="true">
                </ion-icon>
                <ion-icon slot="start" name="fas-check-circle" color="success" *ngIf="task.completed == '1'" aria-hidden="true">
                </ion-icon>
                <ion-label>
                    <h2>{{task.title}}</h2>
                    <p *ngIf="task.details" [innerHTML]="task.details"></p>
                </ion-label>
                <ion-icon slot="end" *ngIf="task.link && task.code != 'submit'" name="fas-external-link-alt" aria-hidden="true">
                </ion-icon>
            </ion-item>
        </ng-container>
    </ion-card>

    <!-- Has something offline. -->
    <ion-card class="core-warning-card" *ngIf="hasOffline">
        <ion-item>
            <ion-icon name="fas-exclamation-triangle" slot="start" aria-hidden="true"></ion-icon>
            <ion-label>{{ 'core.hasdatatosync' | translate: {$a: moduleName} }}</ion-label>
        </ion-item>
    </ion-card>

    <!-- Description (setup phase only) -->
    <ion-card *ngIf="description && workshop && workshop!.phase == PHASE_SETUP">
        <ion-item class="ion-text-wrap">
            <ion-label>
                <h2>{{ 'core.description' | translate }}</h2>
                <core-format-text [text]="description" [component]="component" [componentId]="componentId" contextLevel="module"
                    [contextInstanceId]="module.id" [courseId]="courseId">
                </core-format-text>
            </ion-label>
        </ion-item>
    </ion-card>

    <div *ngIf="access && workshop && workshop!.phase >= PHASE_SUBMISSION">
        <!-- CLOSED PHASE -->
        <ng-container *ngIf="workshop!.phase >= PHASE_CLOSED">
            <ion-card *ngIf="workshop!.conclusion">
                <ion-item class="ion-text-wrap">
                    <ion-label>
                        <h2>{{ 'addon.mod_workshop.conclusion' | translate }}</h2>
                        <core-format-text fullOnClick="true" [component]="component" [componentId]="module.id"
                            [text]="workshop!.conclusion" contextLevel="module" [contextInstanceId]="module.id"
                            [courseId]="courseId">
                        </core-format-text>
                    </ion-label>
                </ion-item>
            </ion-card>

            <ion-card class="with-borders" *ngIf="userGrades">
                <ion-item-divider class="ion-text-wrap">
                    <ion-label><h2>{{ 'addon.mod_workshop.yourgrades' | translate }}</h2></ion-label>
                </ion-item-divider>
                <ion-item class="ion-text-wrap" *ngIf="userGrades.submissionlongstrgrade">
                    <ion-label>
                        <h2>{{ 'addon.mod_workshop.submissiongrade' | translate }}</h2>
                        <p>{{ userGrades.submissionlongstrgrade }}</p>
                    </ion-label>
                </ion-item>
                <ion-item class="ion-text-wrap" *ngIf="userGrades.assessmentlongstrgrade">
                    <ion-label>
                        <h2>{{ 'addon.mod_workshop.gradinggrade' | translate }}</h2>
                        <p>{{ userGrades.assessmentlongstrgrade }}</p>
                    </ion-label>
                </ion-item>
            </ion-card>
        </ng-container>

        <!-- SUBMISSION PHASE -->
        <ion-card *ngIf="workshop!.phase == PHASE_SUBMISSION && workshop!.instructauthors">
            <ion-item class="ion-text-wrap">
                <ion-label>
                    <h2>{{ 'addon.mod_workshop.areainstructauthors' | translate }}</h2>
                    <core-format-text fullOnClick="true" [component]="component" [componentId]="module.id"
                        [text]="workshop!.instructauthors" contextLevel="module" [contextInstanceId]="module.id"
                        [courseId]="courseId">
                    </core-format-text>
                </ion-label>
            </ion-item>
        </ion-card>

        <ion-card *ngIf="canSubmit">
            <ion-item class="ion-text-wrap" *ngIf="!submission">
                <ion-label>
                    <h2>{{ 'addon.mod_workshop.yoursubmission' | translate }}</h2>
                    <p>{{ 'addon.mod_workshop.noyoursubmission' | translate }}</p>
                </ion-label>
            </ion-item>

            <ng-container *ngIf="submission">
                <ion-item-divider class="ion-text-wrap">
                    <ion-label>
                        <h2 *ngIf="workshop!.phase != PHASE_CLOSED">{{ 'addon.mod_workshop.yoursubmission' | translate }}</h2>
                        <h2 *ngIf="workshop!.phase == PHASE_CLOSED">
                            {{ 'addon.mod_workshop.yoursubmissionwithassessments' | translate }}
                        </h2>
                    </ion-label>
                </ion-item-divider>
                <addon-mod-workshop-submission [submission]="submission" [courseId]="workshop!.course" [module]="module"
                    [workshop]="workshop" [access]="access">
                </addon-mod-workshop-submission>
            </ng-container>
        </ion-card>

        <!-- Show only on current phase -->
        <ng-container *ngIf="workshop!.phase == PHASE_SUBMISSION">
            <ion-item class="ion-text-wrap" *ngIf="showSubmit">
                <ion-label>
                    <ion-button expand="block" *ngIf="access.creatingsubmissionallowed && !submission" (click)="gotoSubmit()">
                        <ion-icon slot="start" name="fas-plus" aria-hidden="true"></ion-icon>
                        {{ 'addon.mod_workshop.createsubmission' | translate }}
                    </ion-button>
                    <ion-button expand="block" *ngIf="access.modifyingsubmissionallowed && submission" (click)="gotoSubmit()">
                        <ion-icon slot="start" name="fas-edit" aria-hidden="true"></ion-icon>
                        {{ 'addon.mod_workshop.editsubmission' | translate }}
                    </ion-button>
                </ion-label>
            </ion-item>
        </ng-container>

        <ng-container *ngIf="workshop!.phase >= PHASE_CLOSED">
            <ion-card class="with-borders" *ngIf="publishedSubmissions && publishedSubmissions.length">
                <ion-item-divider class="ion-text-wrap">
                    <ion-label><h2>{{ 'addon.mod_workshop.publishedsubmissions' | translate }}</h2></ion-label>
                </ion-item-divider>
                <ng-container *ngFor="let submission of publishedSubmissions">
                    <addon-mod-workshop-submission [submission]="submission" [courseId]="workshop!.course" [module]="module"
                        [workshop]="workshop" [access]="access" summary="true" class="core-as-item">
                    </addon-mod-workshop-submission>
                </ng-container>
            </ion-card>
        </ng-container>

        <!-- ASSESSMENT PHASE -->
        <ng-container *ngIf="workshop!.phase >= PHASE_ASSESSMENT">
            <ion-card *ngIf="workshop!.phase == PHASE_ASSESSMENT && workshop!.instructreviewers">
                <ion-item class="ion-text-wrap">
                    <ion-label>
                        <h2>{{ 'addon.mod_workshop.areainstructreviewers' | translate }}</h2>
                        <core-format-text fullOnClick="true" [component]="component" [componentId]="module.id"
                            [text]="workshop!.instructreviewers" contextLevel="module" [contextInstanceId]="module.id"
                            [courseId]="courseId">
                        </core-format-text>
                    </ion-label>
                </ion-item>
            </ion-card>

            <ion-card class="with-borders" *ngIf="canAssess">
                <ion-item-divider class="ion-text-wrap">
                    <ion-label><h2>{{ 'addon.mod_workshop.assignedassessments' | translate }}</h2></ion-label>
                </ion-item-divider>
                <ion-item class="ion-text-wrap" *ngIf="!assessments || !assessments.length">
                    <ion-label><p>{{ 'addon.mod_workshop.assignedassessmentsnone' | translate }}</p></ion-label>
                </ion-item>
                <ng-container *ngFor="let assessment of (assessments || [])">
                    <addon-mod-workshop-submission [submission]="assessment.submission" [assessment]="assessment"
                        [courseId]="workshop!.course" [module]="module" [workshop]="workshop" [access]="access" summary="true"
                        class="core-as-item">
                    </addon-mod-workshop-submission>
                </ng-container>
            </ion-card >
        </ng-container>

        <!-- MULTIPLE PHASES SUBMISSION OR GREATER only teachers -->
        <ion-card class="with-borders" *ngIf="access.canviewallsubmissions && workshop!.phase >= PHASE_SUBMISSION &&
            ((grades && grades.length) || (groupInfo && (groupInfo.separateGroups || groupInfo.visibleGroups)))">
            <ion-item-divider class="ion-text-wrap">
                <ion-label>
                    <h2 *ngIf="workshop!.phase == PHASE_SUBMISSION">{{ 'addon.mod_workshop.submissionsreport' | translate }}</h2>
                    <h2 *ngIf="workshop!.phase > PHASE_SUBMISSION">{{ 'addon.mod_workshop.gradesreport' | translate }}</h2>
                </ion-label>
            </ion-item-divider>
            <ion-item class="ion-text-wrap" *ngIf="groupInfo && (groupInfo.separateGroups || groupInfo.visibleGroups)">
                <ion-label id="addon-workshop-groupslabel" *ngIf="groupInfo.separateGroups">
                    {{ 'core.groupsseparate' | translate }}
                </ion-label>
                <ion-label id="addon-workshop-groupslabel" *ngIf="groupInfo.visibleGroups">
                    {{ 'core.groupsvisible' | translate }}
                </ion-label>
                <ion-select [(ngModel)]="group" (ionChange)="setGroup(group)" aria-labelledby="addon-workshop-groupslabel"
                    interface="action-sheet">
                    <ion-select-option *ngFor="let groupOpt of groupInfo.groups" [value]="groupOpt.id">
                        {{groupOpt.name}}
                    </ion-select-option>
                </ion-select>
            </ion-item>

            <ng-container *ngFor="let submission of grades">
                <addon-mod-workshop-submission [submission]="submission" [courseId]="workshop!.course" [module]="module"
                    [workshop]="workshop" [access]="access" summary="true" class="core-as-item">
                </addon-mod-workshop-submission>
            </ng-container>

            <ion-grid *ngIf="page > 0 || hasNextPage">
                <ion-row class="ion-align-items-center">
                    <ion-col *ngIf="page > 0">
                        <ion-button expand="block" fill="outline" (click)="gotoSubmissionsPage(page! -1)">
                            <ion-icon name="fas-chevron-left" slot="start" aria-hidden="true"></ion-icon>
                            {{ 'core.previous' | translate }}
                        </ion-button>
                    </ion-col>
                    <ion-col *ngIf="hasNextPage">
                        <ion-button expand="block" (click)="gotoSubmissionsPage(page! + 1)">
                            {{ 'core.next' | translate }}
                            <ion-icon name="fas-chevron-right" slot="end" aria-hidden="true"></ion-icon>
                        </ion-button>
                    </ion-col>
                </ion-row>
            </ion-grid>
        </ion-card>
    </div>
</core-loading>
