<ion-header>
  <ion-toolbar mode="ios" class="sant">
    <ion-buttons slot="start">
      <ion-back-button mode="md"></ion-back-button>
    </ion-buttons>
    <ion-title class="back-btn">{{santService.updateSant ? 'Edit Sant': 'Add Sant'}}</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content class="sant">
  <div class="top-line">
    <ion-chip class="orange-color">
      <ion-label></ion-label>
    </ion-chip>
    <ion-chip class="orange-color">
      <ion-label></ion-label>
    </ion-chip>
    <ion-chip class="orange-color">
      <ion-label></ion-label>
    </ion-chip>
    <ion-chip>
      <ion-label></ion-label>
    </ion-chip>
  </div>
  <h2>Little about sansarik jeevan</h2>
  <form [formGroup]="sansarikJeevanInformationForm" novalidate class="global-form ion-padding-horizontal">

    <div class="mb-20 search">
      <label position="stacked" class="normal-label">Sansarik father name</label>
      <ion-input type="text" formControlName="father_name" (ionInput)="getFatherList($event.target)"
        placeholder="Father name"
        [attr.disabled]="!santService?.reviewed_fields?.father_name && santService?.updateSant"></ion-input>
      <div class="search-data">
        <ion-list>
          <ion-item *ngFor="let father of fatherList" (click)="addFather(father)">
            <ion-avatar slot="start">
              <img [src]="father.avatar" />
            </ion-avatar>
            <ion-label>
              <h2>{{ father.name }}</h2>
            </ion-label>
          </ion-item>
        </ion-list>
      </div>
    </div>

    <div class="mb-20 search">
      <label position="stacked" class="normal-label">Sansarik mother name</label>
      <ion-input formControlName="mother_name" (ionInput)="getMotherList($event.target)" placeholder="Mother name"
        [attr.disabled]="!santService?.reviewed_fields?.mother_name && santService?.updateSant"></ion-input>
      <div class="search-data">
        <ion-list>
          <ion-item *ngFor="let mother of motherList" (click)="addMother(mother)">
            <ion-avatar slot="start">
              <img [src]="mother.avatar" />
            </ion-avatar>
            <ion-label>
              <h2>{{ mother.name }}</h2>
            </ion-label>
          </ion-item>
        </ion-list>
      </div>
    </div>

    <div class="mb-20 search">
      <label position="stacked" class="normal-label">More about sant</label>
      <ion-textarea rows="6" cols="20" placeholder="Enter any notes here..." formControlName="about"
        [attr.disabled]="!santService?.reviewed_fields?.about && santService?.updateSant"></ion-textarea>
    </div>

  </form>
</ion-content>
<ion-footer class="sant">
  <ion-button class="si" expand="inline-block" mode="md" (click)="moveToBack()">Back</ion-button>
  <ion-button class="si" expand="inline-block" mode="md"
    (click)="moveToNext(sansarikJeevanInformationForm)">Next</ion-button>
</ion-footer>