<!-- Buttons to add to the header. -->
<core-navbar-buttons slot="end">
    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [attr.aria-label]="'core.info' | translate">
        <ion-icon name="fas-info-circle" slot="icon-only" aria-hidden="true"></ion-icon>
    </ion-button>
</core-navbar-buttons>

<!-- Content. -->
<core-loading [hideUntil]="!showLoading">

    <!-- Activity info. -->
    <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"
        [courseId]="courseId" [hasDataToSync]="hasOffline" (completionChanged)="onCompletionChange()">
    </core-course-module-info>

    <core-tabs [hideUntil]="tabsReady" [selectedIndex]="firstSelectedTab">
        <core-tab [title]="'addon.mod_feedback.overview' | translate" id="overview" (ionSelect)="tabChanged('overview')">
            <ng-template>
                <ng-container *ngTemplateOutlet="tabOverview"></ng-container>
            </ng-template>
        </core-tab>
        <core-tab *ngIf="showAnalysis && access && access.canviewreports" id="analysis" [title]="'addon.mod_feedback.analysis' | translate"
            (ionSelect)="tabChanged('analysis')">
            <ng-template>
                <ng-container *ngTemplateOutlet="tabAnalysis"></ng-container>
            </ng-template>
        </core-tab>

        <core-tab *ngIf="showAnalysis && access && !access.canviewreports" id="analysis"
            [title]="'addon.mod_feedback.completed_feedbacks' | translate" (ionSelect)="tabChanged('analysis')">
            <ng-template>
                <ng-container *ngTemplateOutlet="tabAnalysis"></ng-container>
            </ng-template>
        </core-tab>
    </core-tabs>

    <div collapsible-footer *ngIf="!showLoading" slot="fixed">
        <div class="list-item-limited-width adaptable-buttons-row"
            *ngIf="access && (access.canedititems || access.canviewreports || !access.isempty)">
            <ion-button expand="block" fill="outline" (click)="gotoAnswerQuestions(true)" class="ion-margin ion-text-wrap">
                <ion-icon name="fas-search" slot="start" aria-hidden="true"></ion-icon>
                {{ 'addon.mod_feedback.preview' | translate }}
            </ion-button>
            <ion-button *ngIf="access.cancomplete && access.cansubmit && access.isopen" expand="block" (click)="gotoAnswerQuestions()"
                class="ion-margin ion-text-wrap">
                <ng-container *ngIf="!goPage">
                    {{ 'addon.mod_feedback.complete_the_form' | translate }}
                </ng-container>
                <ng-container *ngIf="goPage">
                    {{ 'addon.mod_feedback.continue_the_form' | translate }}
                </ng-container>
            </ion-button>
        </div>

        <core-course-module-navigation [courseId]="courseId" [currentModuleId]="module.id">
        </core-course-module-navigation>
    </div>
</core-loading>

<ng-template #basicInfo>
    <ion-list *ngIf="access && access.canviewanalysis && !access.isempty">
        <ion-item class="ion-text-wrap core-group-selector" *ngIf="groupInfo && (groupInfo.separateGroups || groupInfo.visibleGroups)">
            <ion-label id="addon-feedback-groupslabel">
                <ng-container *ngIf="groupInfo.separateGroups">{{'core.groupsseparate' | translate }}</ng-container>
                <ng-container *ngIf="groupInfo.visibleGroups">{{'core.groupsvisible' | translate }}</ng-container>
            </ion-label>
            <ion-select [(ngModel)]="group" (ionChange)="setGroup(group)" aria-labelledby="addon-feedback-groupslabel"
                interface="action-sheet" [interfaceOptions]="{header: 'core.group' | translate}">
                <ion-select-option *ngFor="let groupOpt of groupInfo.groups" [value]="groupOpt.id">
                    {{groupOpt.name}}
                </ion-select-option>
            </ion-select>
        </ion-item>
        <ion-item class="ion-text-wrap" (click)="openAttempts()" [detail]="access.canviewreports && completedCount > 0"
            [button]="access.canviewreports && completedCount > 0">
            <ion-label>
                <h2>{{ 'addon.mod_feedback.completed_feedbacks' | translate }}</h2>
            </ion-label>
            <ion-badge slot="end">
                <span aria-hidden="true">{{completedCount}}</span>
                <span class="sr-only">
                    {{ 'addon.mod_feedback.completedfeedbackscountdescription' | translate:{count: completedCount} }}
                </span>
            </ion-badge>
        </ion-item>
        <ion-item class="ion-text-wrap" *ngIf="!access.isanonymous && access.canviewreports" (click)="openNonRespondents()" detail="true"
            button>
            <ion-label>
                <h2>{{ 'addon.mod_feedback.show_nonrespondents' | translate }}</h2>
            </ion-label>
        </ion-item>
        <ion-item class="ion-text-wrap">
            <ion-label>
                <h2>{{ 'addon.mod_feedback.questions' | translate }}</h2>
            </ion-label>
            <ion-badge slot="end">
                <span aria-hidden="true">{{itemsCount}}</span>
                <span class="sr-only">
                    {{ 'addon.mod_feedback.questionscountdescription' | translate:{count: itemsCount} }}
                </span>
            </ion-badge>
        </ion-item>
    </ion-list>
</ng-template>

<!-- Template to render the overview. -->
<ng-template #tabOverview>
    <core-loading [hideUntil]="tabsLoaded.overview">
        <ng-container *ngTemplateOutlet="basicInfo"></ng-container>

        <ion-card class="core-info-card" *ngIf="access && access.cancomplete && !access.isopen">
            <ion-item>
                <ion-icon name="fas-question-circle" slot="start" aria-hidden="true"></ion-icon>
                <ion-label>{{ 'addon.mod_feedback.feedback_is_not_open' | translate }}</ion-label>
            </ion-item>
        </ion-card>

        <ion-card class="core-success-card" *ngIf="access && access.cancomplete && access.isopen && !access.cansubmit">
            <ion-item>
                <ion-icon name="fas-check" slot="start" aria-hidden="true"></ion-icon>
                <ion-label>{{ 'addon.mod_feedback.this_feedback_is_already_submitted' | translate }}</ion-label>
            </ion-item>
        </ion-card>

        <ion-list *ngIf="access && (access.canedititems || access.canviewreports || !access.isempty)">
            <ion-item class="ion-text-wrap" *ngIf="access.canedititems && overview.timeopen">
                <ion-label>
                    <h2>{{ 'addon.mod_feedback.feedbackopen' | translate }}</h2>
                    <p>{{overview.openTimeReadable}}</p>
                </ion-label>
            </ion-item>
            <ion-item class="ion-text-wrap" *ngIf="access.canedititems && overview.timeclose">
                <ion-label>
                    <h2>{{ 'addon.mod_feedback.feedbackclose' | translate }}</h2>
                    <p>{{overview.closeTimeReadable}}</p>
                </ion-label>
            </ion-item>
            <ion-item class="ion-text-wrap" *ngIf="access.canedititems && feedback && feedback.page_after_submit">
                <ion-label>
                    <h2>{{ 'addon.mod_feedback.page_after_submit' | translate }}</h2>
                    <core-format-text [component]="component" [componentId]="componentId" [text]="feedback.page_after_submit"
                        contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
                    </core-format-text>
                </ion-label>
            </ion-item>
            <ng-container *ngIf="!access.isempty">
                <ion-item class="ion-text-wrap">
                    <ion-label>
                        <h2>{{ 'addon.mod_feedback.mode' | translate }}</h2>
                        <p *ngIf="access.isanonymous">{{ 'addon.mod_feedback.anonymous' | translate }}</p>
                        <p *ngIf="!access.isanonymous">{{ 'addon.mod_feedback.non_anonymous' | translate }}</p>
                    </ion-label>
                </ion-item>
            </ng-container>
        </ion-list>
    </core-loading>
</ng-template>

<!-- Template to render the analysis. -->
<ng-template #tabAnalysis>
    <core-loading [hideUntil]="tabsLoaded.analysis">
        <ng-container *ngTemplateOutlet="basicInfo"></ng-container>

        <ng-container *ngIf="access && (access.canedititems || !access.isempty)">
            <ion-card class="core-info-card" *ngIf="warning">
                <ion-item>
                    <ion-icon name="fas-question-circle" slot="start" aria-hidden="true"></ion-icon>
                    <ion-label>{{ warning }}</ion-label>
                </ion-item>
            </ion-card>

            <ion-list *ngIf="items && items.length">
                <ion-item class="ion-text-wrap core-analysis" *ngFor="let item of items">
                    <ion-label>
                        <p class="item-heading">
                            {{item.num}}. <core-format-text [component]="component" [componentId]="componentId" [text]="item.name"
                                contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
                            </core-format-text>
                        </p>
                        <p>
                            <core-format-text [component]="component" [componentId]="componentId" [text]="item.label" contextLevel="module"
                                [contextInstanceId]="module.id" [courseId]="courseId">
                            </core-format-text>
                        </p>
                        <ng-container [ngSwitch]="item.templateName">
                            <ng-container *ngSwitchCase="'numeric'">
                                <ul>
                                    <li *ngFor="let data of item.data">{{ data }}</li>
                                </ul>
                                <p>{{ 'addon.mod_feedback.average' | translate }}: {{item.average | number : '1.2-2'}}</p>
                            </ng-container>
                            <ng-container *ngSwitchCase="'list'">
                                <ul>
                                    <ng-container *ngFor="let data of item.data">
                                        <li *ngIf="data">{{ data }}</li>
                                    </ng-container>
                                </ul>
                            </ng-container>
                            <ng-container *ngSwitchCase="'chart'">
                                <core-chart [type]="item.chartType" [data]="item.chartData" [labels]="item.labels" height="300"
                                    contextLevel="module" [contextInstanceId]="module.id" [wsNotFiltered]="true" [courseId]="courseId">
                                </core-chart>
                                <p *ngIf="item.average">
                                    {{ 'addon.mod_feedback.average' | translate }}: {{item.average | number : '1.2-2'}}
                                </p>
                            </ng-container>
                        </ng-container>
                    </ion-label>
                </ion-item>
            </ion-list>
        </ng-container>
    </core-loading>
</ng-template>