<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>
      <ion-label></ion-label>
    </ion-chip>
    <ion-chip>
      <ion-label></ion-label>
    </ion-chip>
  </div>
  <h2>More about diksha</h2>
  <form [formGroup]="dikshaInformationForm" novalidate class="global-form ion-padding-horizontal">

    <div class="mb-20">
      <label position="stacked" class="normal-label">Diksha Date</label>
      <ion-input id="diksha-date-model" class="date-padding"
        [attr.disabled]="!santService?.reviewed_fields?.diksha_date && santService?.updateSant">{{dikshaDate ?
        (dikshaDate | date: 'dd-MM-yyyy') : 'dd-mm-yyyy'}}</ion-input>
      <ion-modal trigger="diksha-date-model" showBackdrop="true" class="date-modal">
        <ng-template>
          <ion-datetime mode="ios" #dikshaDateValue [min]="minDate" [max]="currentDate" formControlName="diksha_date"
            presentation="date" [showDefaultButtons]="true" (ionChange)="dikshaDate = formatDate(dikshaDateValue.value)"
            appGjDatetime>
            <ion-buttons slot="buttons">
              <ion-button mode="md" color="primary"
                (click)="utilityService.defaultButton('CANCEL', dikshaDateValue)">CANCEL
              </ion-button>
              <ion-button mode="md" color="primary" (click)="utilityService.defaultButton('DONE', dikshaDateValue)">DONE
              </ion-button>
            </ion-buttons>
          </ion-datetime>
        </ng-template>
      </ion-modal>
    </div>

    <div class="mb-20">
      <label position="stacked" class="normal-label">Diksha place</label>
      <input type="text" keyboardFix formControlName="diksha_place" id="personalLocation" #personalLocation
        placeholder="Diksha Place" maxlength="1000" class="location-input" (click)="initAutocomplete()"
        (keyup)="removeLatAndLong()" *ngIf="(!santService?.reviewed_fields?.diksha_place && santService?.updateSant)"
        [attr.disabled]="true">
      <input type="text" keyboardFix formControlName="diksha_place" id="personalLocation" #personalLocation
        placeholder="Diksha Place" maxlength="1000" class="location-input" (click)="initAutocomplete()"
        (keyup)="removeLatAndLong()" *ngIf="!(!santService?.reviewed_fields?.diksha_place && santService?.updateSant)">
    </div>

    <div>
      <label position="stacked" class="normal-label">Guru</label>
      <ion-input formControlName="guru" (ionInput)="getSantList($event.target)" placeholder="Guru"
        [attr.disabled]="!santService?.reviewed_fields?.guru && santService?.updateSant"></ion-input>
      <div class="search-data" *ngIf="santList.length !== 0">
        <ion-list>
          <ion-item *ngFor="let guru of santList" (click)="addSant(guru)">
            <ion-avatar slot="start">
              <img [src]="guru.avatar" />
            </ion-avatar>
            <ion-label>
              <h2>{{ guru.name }}</h2>
            </ion-label>
          </ion-item>
        </ion-list>
      </div>
    </div>

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