<ion-header>
    <ion-navbar core-back-button>
        <ion-title><core-format-text  [text]=" title "></core-format-text></ion-title>
    </ion-navbar>
</ion-header>
<ion-content>
    <core-loading [hideUntil]="feedbackLoaded">
        <ng-container *ngIf="items && items.length">
            <ion-list no-margin>
                <ion-item text-wrap>
                    <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-item>
                <ng-container *ngFor="let item of items">
                    <ion-item-divider *ngIf="item.typ == 'pagebreak'" color="light"></ion-item-divider>
                    <ion-item text-wrap *ngIf="item.typ != 'pagebreak'" [color]="item.dependitem > 0 ? 'light' : ''" [class.core-danger-item]="item.isEmpty || item.hasError">
                        <ion-label *ngIf="item.name" [core-mark-required]="item.required" stacked>
                            <span *ngIf="feedback.autonumbering && item.itemnumber">{{item.itemnumber}}. </span>
                            <core-format-text  [component]="component" [componentId]="componentId" [text]="item.name"></core-format-text>
                        </ion-label>
                        <div item-content class="addon-mod_feedback-form-content" *ngIf="item.template">
                            <ng-container [ngSwitch]="item.template">
                                <ng-container *ngSwitchCase="'label'">
                                    <p><core-format-text [component]="component" [componentId]="componentId" [text]="item.presentation"></core-format-text></p>
                                </ng-container>
                                <ng-container *ngSwitchCase="'textfield'">
                                    <ion-input type="text" [(ngModel)]="item.value" autocorrect="off" name="{{item.typ}}_{{item.id}}" maxlength="{{item.maxlength}}" [required]="item.required"></ion-input>
                                </ng-container>
                                <ng-container *ngSwitchCase="'numeric'">
                                    <ion-input [required]="item.required" name="{{item.typ}}_{{item.id}}" type="number" [(ngModel)]="item.value"></ion-input>
                                    <p *ngIf="item.hasError" color="error">{{ 'addon.mod_feedback.numberoutofrange' | translate }} [{{item.rangefrom}}<span *ngIf="item.rangefrom && item.rangeto">, </span>{{item.rangeto}}]</p>
                                </ng-container>
                                <ng-container *ngSwitchCase="'textarea'">
                                    <ion-textarea [required]="item.required" name="{{item.typ}}_{{item.id}}" [attr.aria-multiline]="true" [(ngModel)]="item.value"></ion-textarea>
                                </ng-container>
                                <ng-container *ngSwitchCase="'multichoice-r'">
                                    <ion-list radio-group [(ngModel)]="item.value" [required]="item.required" name="{{item.typ}}_{{item.id}}">
                                        <ion-item *ngFor="let option of item.choices">
                                            <ion-label><core-format-text  [component]="component" [componentId]="componentId" [text]="option.label"></core-format-text></ion-label>
                                            <ion-radio [value]="option.value"></ion-radio>
                                        </ion-item>
                                    </ion-list>
                                </ng-container>
                                <ion-list *ngSwitchCase="'multichoice-c'">
                                    <ion-item *ngFor="let option of item.choices">
                                        <ion-label><core-format-text  [component]="component" [componentId]="componentId" [text]="option.label"></core-format-text></ion-label>
                                        <ion-checkbox [required]="item.required" name="{{item.typ}}_{{item.id}}" [(ngModel)]="option.checked" value="option.value"></ion-checkbox>
                                    </ion-item>
                                </ion-list>
                                <ng-container *ngSwitchCase="'multichoice-d'">
                                    <ion-select [required]="item.required" name="{{item.typ}}_{{item.id}}" [(ngModel)]="item.value" interface="popover">
                                        <ion-option *ngFor="let option of item.choices" [value]="option.value"><core-format-text  [component]="component" [componentId]="componentId" [text]="option.label"></core-format-text></ion-option>
                                    </ion-select>
                                </ng-container>
                                <ng-container *ngSwitchCase="'captcha'">
                                    <core-recaptcha *ngIf="!preview && !offline" [publicKey]="item.captcha.recaptchapublickey" [model]="item" modelValueName="value"></core-recaptcha>
                                    <div *ngIf="!preview && (!item.captcha || offline)" class="core-warning-card" icon-start>
                                        <ion-icon name="warning"></ion-icon>
                                        {{ 'addon.mod_feedback.captchaofflinewarning' | translate }}
                                    </div>
                                </ng-container>
                            </ng-container>
                        </div>
                    </ion-item>
                </ng-container>
                <ion-grid *ngIf="!preview">
                    <ion-row align-items-center>
                        <ion-col *ngIf="hasPrevPage">
                            <button ion-button block outline icon-start (click)="gotoPage(true)">
                                <ion-icon name="arrow-back"></ion-icon>
                                {{ 'addon.mod_feedback.previous_page' | translate }}
                            </button>
                        </ion-col>
                        <ion-col *ngIf="hasNextPage">
                            <button ion-button block icon-end (click)="gotoPage(false)">
                                {{ 'addon.mod_feedback.next_page' | translate }}
                                <ion-icon name="arrow-forward"></ion-icon>
                            </button>
                        </ion-col>
                        <ion-col *ngIf="!hasNextPage">
                            <button ion-button block (click)="gotoPage(false)">
                                {{ 'addon.mod_feedback.save_entries' | translate }}
                            </button>
                        </ion-col>
                    </ion-row>
                </ion-grid>
            </ion-list>
        </ng-container>

        <div class="core-success-card" icon-start *ngIf="completed">
            <ion-icon name="checkmark"></ion-icon>
            <p *ngIf="!completionPageContents && !completedOffline">{{ 'addon.mod_feedback.this_feedback_is_already_submitted' | translate }}</p>
            <p *ngIf="!completionPageContents && completedOffline">{{ 'addon.mod_feedback.feedback_submitted_offline' | translate }}</p>
            <p *ngIf="completionPageContents"><core-format-text  [component]="component" componentId="componentId" [text]="completionPageContents"></core-format-text></p>
        </div>

        <ion-grid *ngIf="completed">
            <ion-row align-items-center>
                <ion-col *ngIf="access.canviewanalysis">
                    <button ion-button block outline icon-start (click)="showAnalysis()">
                        <ion-icon name="stats"></ion-icon>
                        {{ 'addon.mod_feedback.completed_feedbacks' | translate }}
                    </button>
                </ion-col>
                <ion-col *ngIf="hasNextPage">
                    <button ion-button block icon-end (click)="continue()">
                        {{ 'core.continue' | translate }}
                        <ion-icon name="arrow-forward"></ion-icon>
                    </button>
                </ion-col>
            </ion-row>
        </ion-grid>
    </core-loading>
</ion-content>
