<ion-header>
  <ion-toolbar mode="ios" class="sant">
    <ion-title>Sant</ion-title>
    <ion-icon name="search" slot="end" (click)="searchSant()"></ion-icon>
  </ion-toolbar>
</ion-header>
<ion-content class="sant">
  <div class="header-search">
    <ion-button slot="end" (click)="addSant()" mode="md">Add sant</ion-button>
    <ion-button slot="end" (click)="viewAllSant(1)" mode="md">
      <div class="ripple-container">
        <span class="ripple-circle sant" *ngIf="hasNewReview"></span>
        <ion-label>In review</ion-label>
      </div>
    </ion-button>
  </div>
  <div class="following" *ngIf="createdSantList?.length !== 0">
    <h5>Sant created by you <span (click)="viewAllSant(3)" *ngIf="santListTotalCount > 3">View all</span></h5>
    <div class="sant-profile">
      <div (click)="santProfile(sant.id)" *ngFor="let sant of createdSantList; let index = index">
        <ion-avatar slot="start">
          <app-avatar-percentage [url]="sant?.avatar ?
        sant.avatar : '/assets/images/sant-profile.png'"
            [percentage]="+sant?.profile_statistics?.profile_completion_percentage" [width]="50" [height]="50"
            type="sant"></app-avatar-percentage>
        </ion-avatar>
        <h3>{{ sant?.name }}</h3>
      </div>
    </div>
  </div>
  <h5 *ngIf="followingSantList?.length !== 0">Following <span (click)="viewAllSant(2)"
      *ngIf="followingSantListTotalCount > 3">View all</span></h5>
  <ion-list *ngFor="let sant of followingSantList; let index = index">
    <ion-item (click)="santProfile(sant.id)">
      <ion-avatar slot="start">
        <app-avatar-percentage [url]="sant?.avatar ?
        sant.avatar : '/assets/images/sant-profile.png'"
          [percentage]="+sant?.profile_statistics?.profile_completion_percentage" [width]="50" [height]="50"
          type="sant"></app-avatar-percentage>
      </ion-avatar>
      <ion-label>
        <h3>{{ sant?.name }}
        </h3>
        <ion-button class="view" mode="md">View</ion-button>
      </ion-label>
    </ion-item>
  </ion-list>
  <h5 *ngIf="suggestionSantList?.length !== 0">Suggestion <span (click)="viewAllSant(4)"
      *ngIf="suggestedSantListTotalCount > 5">View all</span></h5>
  <ion-list *ngFor="let sant of suggestionSantList; let index = index">
    <ion-item (click)="santProfile(sant.id)">
      <ion-avatar slot="start">
        <app-avatar-percentage [url]="sant?.avatar ?
        sant.avatar : '/assets/images/sant-profile.png'"
          [percentage]="+sant?.profile_statistics?.profile_completion_percentage" [width]="50" [height]="50"
          type="sant"></app-avatar-percentage>
      </ion-avatar>
      <ion-label>
        <h3>{{ sant?.name }}
        </h3>
        <ion-button (click)="followSant($event, sant, index)" mode="md"> {{ sant?.is_user_following ? 'Following'
          :
          'Follow' }}</ion-button>
      </ion-label>
    </ion-item>
  </ion-list>
</ion-content>
<app-footer></app-footer>
<ng-template #loadingSpinner>
  <ion-spinner name="dots"></ion-spinner>
</ng-template>