<ion-header>
  <ion-toolbar mode="ios" class="sant">
    <ion-buttons slot="start">
      <ion-back-button mode="md" (click)="moveToBack()"></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 class="orange-color">
      <ion-label></ion-label>
    </ion-chip>
  </div>
  <h2>Sant profile image</h2>
  <p>Please upload clean and original image that can help followers to identify your Sant.</p>
  <ion-avatar class="ion-margin-start profile-bg"
    (click)="(!santService?.reviewed_fields?.avatar && santService?.updateSant) ? null : selectProfileImage()">
    <img src="/assets/images/sant-profile.png" *ngIf="!photo" />
    <img [src]="photo | safeUrl" *ngIf="photo" />
  </ion-avatar>
  <ion-button class="si" expand="inline-block" (click)="selectProfileImage()"
    [disabled]="!santService?.reviewed_fields?.avatar && santService?.updateSant" mode="md">Change profile
    image</ion-button>
  <p class="agreed-content">
    <ion-checkbox slot="start" [(ngModel)]="confirmationFlag" mode="md"></ion-checkbox>
    <label>I agree that sant information is accurate</label>
  </p>
</ion-content>
<ion-footer class="sant">
  <ion-button class="si" expand="inline-block" (click)="moveToBack()" mode="md">Back</ion-button>
  <ion-button class="si" expand="inline-block" (click)="moveToNext()" [disabled]="!confirmationFlag"
    mode="md">Finish</ion-button>
</ion-footer>
