<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>{{ 'feedback.page.TITLE' | translate }}</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <form #feedbackForm="ngForm" (ngSubmit)="onSubmit()">
    <ion-item>
      <ion-label position="stacked">{{
        'feedback.form.name.label' | translate
      }}</ion-label>
      <ion-input
        placeholder="{{ 'feedback.form.name.placeholder' | translate }}"
        [(ngModel)]="author.name"
        name="name"
      ></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="stacked">{{
        'feedback.form.type.label' | translate
      }}</ion-label>
      <ion-select
        [(ngModel)]="message.name"
        value="comment"
        name="title"
        interface="popover"
        required="true"
      >
        <ion-select-option value="Comment">{{
          'feedback.form.type.values.comment' | translate
        }}</ion-select-option>
        <ion-select-option value="Bug">{{
          'feedback.form.type.values.bug' | translate
        }}</ion-select-option>
      </ion-select>
    </ion-item>
    <ion-item>
      <ion-label position="stacked">{{
        'feedback.form.email.label' | translate
      }}</ion-label>
      <ion-input
        placeholder="{{ 'feedback.form.email.placeholder' | translate }}"
        [(ngModel)]="author.email"
        type="email"
        name="email"
        pattern="[A-Za-z0-9._%+-]{3,}@[a-zA-Z]{3,}([.]{1}[a-zA-Z]{2,}|[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,})"
      ></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="stacked">{{
        'feedback.form.message.label' | translate
      }}</ion-label>
      <ion-textarea
        [(ngModel)]="message.messageBody"
        placeholder="{{ 'feedback.form.message.placeholder' | translate }}"
        name="message"
        required="true"
        minlength="30"
        autoGrow="true"
      ></ion-textarea>
    </ion-item>
    <ion-item>
      <ion-label class="ion-text-wrap">{{
        'feedback.form.termsAgree' | translate
      }}</ion-label>
      <ion-checkbox
        color="primary"
        slot="start"
        [(ngModel)]="termsAgree"
        name="termsAgree"
      ></ion-checkbox>
    </ion-item>
    <ion-button
      type="submit"
      color="primary"
      expand="block"
      [disabled]="!feedbackForm.valid || !termsAgree || submitSuccess"
      >{{ 'feedback.form.submit' | translate }}</ion-button
    >
    <ion-card>
      <ion-card-title>
        <ion-button expand="block" fill="clear" (click)="toggleShowMetaData()">
          <ng-container *ngIf="!showMetaData; else hide">{{
            'feedback.form.protocolData.show' | translate
          }}</ng-container>
          <ng-template #hide>{{
            'feedback.form.protocolData.hide' | translate
          }}</ng-template>
        </ion-button>
      </ion-card-title>
      <ion-card-content *ngIf="metaData && showMetaData">
        <pre>{{ metaData | json }}</pre>
      </ion-card-content>
    </ion-card>
  </form>
</ion-content>
