<!--
~ Copyright (C) 2023 StApps
~ This program is free software: you can redistribute it and/or modify it
~ under the terms of the GNU General Public License as published by the Free
~ Software Foundation, version 3.
~
~ This program is distributed in the hope that it will be useful, but WITHOUT
~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
~ more details.
~
~ You should have received a copy of the GNU General Public License along with
~ this program. If not, see <https://www.gnu.org/licenses/>.
-->

<ion-header>
  <ion-toolbar color="primary" mode="ios">
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>{{ 'feedback.page.TITLE' | translate }}</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content parallax>
  <div class="feedback-content">
    <ion-card>
      <form #feedbackForm="ngForm" (ngSubmit)="onSubmit()">
        <ion-item>
          <ion-input
            placeholder="{{ 'feedback.form.name.placeholder' | translate }}"
            [(ngModel)]="author.name"
            [label]="'feedback.form.name.label' | translate"
            labelPlacement="stacked"
            name="name"
          ></ion-input>
        </ion-item>
        <ion-item>
          <ion-select
            [(ngModel)]="message.name"
            [label]="'feedback.form.type.label' | translate"
            labelPlacement="stacked"
            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-input
            placeholder="{{ 'feedback.form.email.placeholder' | translate }}"
            [(ngModel)]="author.email"
            [label]="'feedback.form.email.label' | translate"
            labelPlacement="stacked"
            type="email"
            name="email"
            ngModel
            email
          ></ion-input>
        </ion-item>
        <ion-item>
          <ion-textarea
            [(ngModel)]="message.messageBody"
            placeholder="{{
              'feedback.form.message.placeholder' | translate: {number: MINIMUM_MESSAGE_SIZE}
            }}"
            [label]="'feedback.form.message.label' | translate"
            labelPlacement="stacked"
            name="message"
            required="true"
            minlength="{{ MINIMUM_MESSAGE_SIZE }}"
            autoGrow="true"
          ></ion-textarea>
        </ion-item>
        <ion-item>
          <ion-checkbox
            color="primary"
            label-placement="end"
            justify="start"
            [(ngModel)]="termsAgree"
            name="termsAgree"
            ><span class="ion-text-wrap">{{ 'feedback.form.termsAgree.0' | translate }}</span></ion-checkbox
          >
        </ion-item>
        <ion-item lines="none">
          <ion-label
            ><a style="display: contents" [routerLink]="['/about/privacy']">{{
              'feedback.form.termsAgree.1' | translate
            }}</a></ion-label
          >
        </ion-item>
        <ion-item>
          <ion-checkbox
            color="primary"
            class="ion-text-wrap"
            label-placement="end"
            justify="start"
            [(ngModel)]="protocolDataAgree"
            name="protocolDataAgree"
            ><span class="ion-text-wrap">{{
              'feedback.form.protocolDataAgree' | translate
            }}</span></ion-checkbox
          >
        </ion-item>
        <ion-card>
          <ion-card-title>
            <ion-button expand="block" fill="clear" (click)="toggleShowMetaData()">
              @if (!showMetaData) {
                {{ 'feedback.form.protocolData.show' | translate }}
              } @else {
                {{ 'feedback.form.protocolData.hide' | translate }}
              }
              <ng-template #hide>{{ 'feedback.form.protocolData.hide' | translate }}</ng-template>
            </ion-button>
          </ion-card-title>
          @if (metaData && showMetaData) {
            <ion-card-content>
              <pre>{{ metaData | json }}</pre>
            </ion-card-content>
          }
        </ion-card>
        <ion-button
          type="submit"
          color="primary"
          expand="block"
          [disabled]="!feedbackForm.valid || !termsAgree || submitSuccess"
          >{{ 'feedback.form.submit' | translate }}</ion-button
        >
      </form>
    </ion-card>
  </div>
</ion-content>
