<ion-header>
  <ion-toolbar mode="ios">
    <ion-buttons slot="start">
      <ion-back-button mode="md"></ion-back-button>
    </ion-buttons>
    <ion-title class="back-btn">Add child</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <div class="top-line">
    <ion-chip class="orange-color">
      <ion-label></ion-label>
    </ion-chip>
    <ion-chip>
      <ion-label></ion-label>
    </ion-chip>
    <ion-chip>
      <ion-label></ion-label>
    </ion-chip>
  </div>
  <h2>Child information</h2>
  <form [formGroup]="userInformationForm" novalidate class="global-form ion-padding-horizontal">
    <div class="mb-20">
      <label position="stacked" class="normal-label">Full name<span class="required-label">*</span></label>
      <ion-input placeholder="Full name" formControlName="fullName"></ion-input>
      <div
        *ngIf="userInformationForm?.controls?.fullName?.invalid && (userInformationForm?.controls?.fullName?.dirty || userInformationForm?.controls?.fullName?.touched)">
        <span *ngIf="userInformationForm?.controls?.fullName?.errors?.required" class="error">
          Full name is required.
        </span>
      </div>
    </div>

    <div class="mb-20">
      <label position="stacked" class="normal-label">Choose relationship<span class="required-label">*</span></label>
      <ion-select mode="ios" interface="action-sheet" formControlName="relationship" placeholder="Select"
        class="custom-arrow custom-select">
        <ion-select-option [value]="relationship.id"
          *ngFor="let relationship of relationshipsDetails">{{relationship.name}}</ion-select-option>
      </ion-select>
      <div
        *ngIf="userInformationForm?.controls?.relationship?.invalid && (userInformationForm?.controls?.relationship?.dirty || userInformationForm?.controls?.relationship?.touched)">
        <span *ngIf="userInformationForm?.controls?.relationship?.errors?.required" class="error">
          Please select relationship.
        </span>
      </div>
    </div>

    <div class="mb-20" button="true">
      <label position="stacked" class="normal-label">Birth date<span class="required-label">*</span></label>
      <ion-input id="passive-birth-date-model" class="date-padding">{{childBirthDateValue ? (childBirthDateValue | date:
        'dd-MM-yyyy') : 'dd-mm-yyyy'}}</ion-input>
      <ion-modal trigger="passive-birth-date-model" showBackdrop="true" class="date-modal">
        <ng-template>
          <ion-datetime mode="ios" #childBirthDate [min]="minDate" [max]="currentDate" formControlName="birthDate"
            presentation="date" [showDefaultButtons]="true"
            (ionChange)="childBirthDateValue = formatDate(childBirthDate.value)" appGjDatetime>
            <ion-buttons slot="buttons">
              <ion-button color="primary" (click)="utilityService.defaultButton('CANCEL', childBirthDate)"
                mode="md">CANCEL
              </ion-button>
              <ion-button color="primary" (click)="utilityService.defaultButton('DONE', childBirthDate)" mode="md">DONE
              </ion-button>
            </ion-buttons>
          </ion-datetime>
        </ng-template>
      </ion-modal>
      <div
        *ngIf="userInformationForm?.controls?.birthDate?.invalid && (userInformationForm?.controls?.birthDate?.dirty || userInformationForm?.controls?.birthDate?.touched)">
        <span *ngIf="userInformationForm?.controls?.birthDate?.errors?.required" class="error">
          Birth date is required.
        </span>
      </div>
    </div>

  </form>
</ion-content>
<ion-footer>
  <ion-button class="si" expand="block" (click)="moveToNext(userInformationForm)" mode="md">Next</ion-button>
</ion-footer>