<ion-header>
  <ion-toolbar mode="ios" class="sant d-flex ion-justify-content-between">
    <ion-buttons slot="start">
      <ion-back-button mode="md"></ion-back-button>
    </ion-buttons>
    <ion-title class="back-btn">{{title}}</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content class="sant">
  <ion-card *ngIf="!spinnerFlag" class="ion-text-center">
    <ion-spinner name="lines"></ion-spinner>
  </ion-card>
  <div *ngIf="noDataFlag && santList?.length === 0" class="ion-text-center no-data-flag ion-padding-horizontal">
    <img src="/assets/images/welcome-sant.svg" height="200" width="240" alt="Global Jain">
    <p *ngIf="santListType !== '2' && santListType !== '1'">No data found</p>
    <p *ngIf="santListType === '2'">By following Sant, you can know current location, chaturmas and live updates on
      Vihaar. Please use Global search / suggestions for the Sants to follow.</p>
    <p *ngIf="santListType === '1'">All Sant's profile updated by you and with Admin for review will be listed here. No
      M.S details updated by you.</p>
  </div>
  <ion-list *ngFor="let sant of santList; let index = index">
    <ion-item class="ion-no-margin ion-padding-horizontal" (click)="santProfile(sant)">
      <ion-avatar class="ion-no-margin ion-margin-end" slot="start">
        <app-avatar-percentage [url]="sant?.avatar ?
        sant.avatar : '/assets/images/sant-profile.png'"
          [percentage]="+sant?.profile_statistics?.profile_completion_percentage" [width]="40" [height]="40"
          type="sant"></app-avatar-percentage>
      </ion-avatar>
      <ion-label class="ion-no-margin ion-justify-content-between ion-align-item-center"
        [ngClass]="{'sent-back-label': santListType === '1' && (sant?.verification_status === 5 || sant?.verification_status === 3)}">
        <div class="wrap">
          <h3 class="ion-no-margin">{{ sant?.name }}</h3>
          <p *ngIf="santListType === '1' && (sant?.verification_status === 5 || sant?.verification_status === 3)"
            class="sent-back ion-no-margin d-flex ion-align-item-center">
            <span class="in-review">Sent Back</span>
            <ion-icon name="information-outline" class="sent-back-info-icon"
              (click)="santBackInfo($event, sant?.description)"></ion-icon>
          </p>
          <p *ngIf="santListType !== '1'">{{ sant?.about }}</p>
          <p class="review-label" *ngIf="santListType === '1' && sant?.dharm">{{sant?.dharm?.name}}</p>
          <p class="review-label" *ngIf="santListType === '1' && sant?.sampraday">({{sant?.sampraday?.name}})</p>
        </div>
        <ion-button class="following ion-no-margin" (click)="followSant($event, sant, index); $event.stopPropagation()"
          *ngIf="sant?.is_user_following && !isInReview && santListType !== '5'" mode="md">Following</ion-button>
        <ion-button class="ion-no-margin ion-margin-start"
          (click)="followSant($event, sant, index); $event.stopPropagation()" mode="md"
          *ngIf="!sant?.is_user_following && !isInReview && santListType !== '5'">Follow</ion-button>
      </ion-label>
    </ion-item>
  </ion-list>
  <ion-infinite-scroll threshold="250px" (ionInfinite)="loadData($event)" *ngIf="pageNumber <= totalPage">
    <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>
