<ion-header>
  <ion-toolbar [class]="pType" mode="ios">
    <ion-title>Report {{ data.postId ? 'content' : data.commentId ? 'comment' : 'user' }}</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content class="bottom-bg-location">
  <div [formGroup]="reportForm" [class]="pType" novalidate class="global-form ion-padding-horizontal">

    <div class="ion-padding-top mb-20">
      <label position="stacked" class="normal-label">
        Reason<span class="required-label">*</span>
      </label>
      <ion-select formControlName="subject" mode="ios" interface="action-sheet" placeholder="Select"
        class="custom-select custom-arrow">
        <ion-select-option [value]="sub.value" *ngFor="let sub of reportSubjects">{{sub.text}}</ion-select-option>
      </ion-select>
      <div *ngIf="reportForm.controls.subject?.invalid && reportForm.dirty">
        <span *ngIf="reportForm.controls.subject?.errors?.required" class="error">
          Please select a reason.
        </span>
      </div>
    </div>

    <div class="mb-20">
      <label position="stacked" class="normal-label">
        Description
      </label>
      <ion-textarea formControlName="description" mode="ios"> </ion-textarea>
    </div>

    <ion-button mode="md" [class]="'ion-margin'+ ' ' + pType" expand="block" (click)="submit()">Submit</ion-button>
  </div>
</ion-content>