<ion-header>
    <ion-navbar core-back-button>
        <ion-title>{{ 'addon.mod_feedback.responses' |translate }}</ion-title>
    </ion-navbar>
</ion-header>
<core-split-view>
    <ion-content>
        <ion-refresher [enabled]="feedbackLoaded" (ionRefresh)="refreshFeedback($event)">
            <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
        </ion-refresher>
        <core-loading [hideUntil]="feedbackLoaded">
            <ion-list no-margin>
                <ion-item text-wrap *ngIf="groupInfo.separateGroups || groupInfo.visibleGroups">
                    <ion-label id="addon-feedback-groupslabel" *ngIf="groupInfo.separateGroups">{{ 'core.groupsseparate' | translate }}</ion-label>
                    <ion-label id="addon-feedback-groupslabel" *ngIf="groupInfo.visibleGroups">{{ 'core.groupsvisible' | translate }}</ion-label>
                    <ion-select [(ngModel)]="selectedGroup" (ionChange)="loadAttempts(selectedGroup)" aria-labelledby="addon-feedback-groupslabel" interface="popover">
                        <ion-option *ngFor="let groupOpt of groupInfo.groups" [value]="groupOpt.id">{{groupOpt.name}}</ion-option>
                    </ion-select>
                </ion-item>
                <ng-container *ngIf="responses.total > 0">
                    <ion-item-divider color="light">
                        {{ 'addon.mod_feedback.non_anonymous_entries' | translate : {$a: responses.total } }}
                    </ion-item-divider>
                    <a *ngFor="let attempt of responses.attempts" ion-item text-wrap (click)="gotoAttempt(attempt)" [class.core-split-item-selected]="attempt.id == attemptId">
                        <ion-avatar item-start>
                            <img [src]="attempt.profileimageurl" [alt]="'core.pictureof' | translate:{$a: attempt.fullname}" core-external-content onError="this.src='assets/img/user-avatar.png'">
                        </ion-avatar>
                        <h2><core-format-text [text]="attempt.fullname"></core-format-text></h2>
                        <p *ngIf="attempt.timemodified">{{attempt.timemodified * 1000 | coreFormatDate: "LLL"}}</p>
                    </a>
                    <ion-item padding text-center *ngIf="responses.canLoadMore">
                        <!-- Button and spinner to show more attempts. -->
                        <button ion-button block *ngIf="!loadingMore" (click)="loadAttempts()">{{ 'core.loadmore' | translate }}</button>
                        <ion-spinner *ngIf="loadingMore"></ion-spinner>
                    </ion-item>
                </ng-container>
                <ng-container *ngIf="anonResponses.total > 0">
                    <ion-item-divider color="light">
                        {{ 'addon.mod_feedback.anonymous_entries' |translate : {$a: anonResponses.total } }}
                    </ion-item-divider>
                    <a *ngFor="let attempt of anonResponses.attempts" ion-item text-wrap (click)="gotoAttempt(attempt)" [class.core-split-item-selected]="attempt.id == attemptId">
                        <h2>{{ 'addon.mod_feedback.response_nr' |translate }}: {{attempt.number}}</h2>
                    </a>
                    <ion-item padding text-center *ngIf="anonResponses.canLoadMore">
                        <!-- Button and spinner to show more attempts. -->
                        <button ion-button block *ngIf="!loadingMore" (click)="loadAttempts()">{{ 'core.loadmore' | translate }}</button>
                        <ion-spinner *ngIf="loadingMore"></ion-spinner>
                    </ion-item>
                </ng-container>
            </ion-list>
        </core-loading>
    </ion-content>
</core-split-view>
