<ion-header>
  <ion-toolbar mode="ios" class="sant">
    <ion-buttons slot="start">
      <ion-back-button mode="md" defaultHref="page/shravak-feeds"></ion-back-button>
    </ion-buttons>
    <ion-title class="back-btn">Sant profile</ion-title>
    <ion-icon name="share-social" slot="end" (click)="shareProfile()"></ion-icon>
  </ion-toolbar>
</ion-header>
<ion-content class="sant">
  <div class="bg ion-padding-top ion-text-center">
    <div style="position: relative;">
      <ion-avatar class="profile-bg d-flex ion-justify-content-center ion-align-items-center">
        <div class="complete-progress"
          style="--progress: {{+santDetails?.profile_statistics?.profile_completion_percentage*3.6}}deg;">
          <img src="/assets/images/sant-profile.png"
            (click)="utilityService.imagePreview('/assets/images/sant-profile.png')" *ngIf="!santDetails?.avatar" />
          <img [src]="santDetails?.avatar" (click)="utilityService.imagePreview(santDetails?.avatar)"
            *ngIf="santDetails?.avatar" />
        </div>
      </ion-avatar>
      <div class="update-profile-link" (click)="editProfile()" *ngIf="+santDetails?.profile_statistics?.profile_completion_percentage !== 100 &&
      (((!santDetails?.is_in_review && santDetails?.verification_status === 1) && !updatedSantId) ||
        (updatedSantId && [3,5].includes(santDetails?.verification_status)))">
        <span>{{+santDetails?.profile_statistics?.profile_completion_percentage}}% | Update Profile</span>
        <ion-icon name="chevron-forward-outline" class="ml-auto"></ion-icon>
      </div>
    </div>
    <h3 class="ion-padding-horizontal ion-no-margin">{{ santDetails?.name }}</h3>
    <p class="ion-padding-horizontal ion-no-margin ion-margin-bottom">{{ santDetails?.sampraday?.name }}</p>
    <div class="honors-chip ion-padding-horizontal">
      <ion-chip class="ion-no-margin" *ngFor="let honor of santDetails?.honor; let i = index">
        <ion-label>{{honor | titlecase}}</ion-label>
      </ion-chip>
    </div>
    <div class="d-flex follow-box ion-justify-content-between ion-margin-horizontal ion-margin-bottom"
      *ngIf="santDetails?.followers?.length > 0 || santDetails?.is_owner !== 1 || santDetails?.status === 1">
      <ion-item class="ion-no-margin ion-no-padding">
        <ion-thumbnail class="ion-no-margin" *ngFor="let follower of santDetails?.followers">
          <img [src]="follower?.avatar" />
        </ion-thumbnail>
        <ion-thumbnail class="ion-no-margin d-flex ion-align-items-center ion-justify-content-center"
          *ngIf="santDetails?.followers_count > 3" (click)="viewAllFollowers()">
          <span>+</span>{{ localizeCount(santDetails?.followers_count - santDetails?.followers?.length) }}
        </ion-thumbnail>
      </ion-item>
      <ion-button class="ion-no-margin" expand="inline-block" (click)="followSant($event, santDetails)"
        *ngIf="santDetails?.status !== 1 && santDetails?.is_owner !== 1" mode="md"> {{
        santDetails?.is_user_following ?
        'Following' : 'Follow' }} </ion-button>
    </div>
    <ion-card class="profile-complete-indicator" *ngIf="+santDetails?.profile_statistics?.profile_completion_percentage !== 100 &&
    (((!santDetails?.is_in_review && santDetails?.verification_status === 1) && !updatedSantId) ||
      (updatedSantId && [3,5].includes(santDetails?.verification_status)))">
      <app-profile-complete-indicator page="sant"
        [percentage]="+santDetails?.profile_statistics?.profile_completion_percentage"
        (clicked)="editProfile()"></app-profile-complete-indicator>
    </ion-card>
    <div class="d-flex view-btn ion-justify-content-center ion-padding-horizontal">
      <ion-button class="ion-no-margin" expand="inline-block" (click)="moveToSantBio()" mode="md">View M.S
        profile</ion-button>
      <ion-button class="ion-no-margin" expand="inline-block" (click)="editProfile()" *ngIf="((!santDetails?.is_in_review && santDetails?.verification_status === 1) && !updatedSantId) ||
        (updatedSantId && [3,5].includes(santDetails?.verification_status))" mode="md">Edit profile</ion-button>
      <ion-button class="ion-no-margin" expand="inline-block" (click)="goToInReview()"
        *ngIf="(santDetails?.is_in_review || santDetails?.verification_status !== 1) && !updatedSantId" mode="md"
        mode="md"> In review
      </ion-button>
    </div>
    <div class="chaturmas-btn d-flex ion-align-items-center ion-justify-content-around">
      <div class="chaturmas d-flex ion-align-items-center ion-justify-content-center">
        <div class="chaturmas-icon d-flex ion-align-items-center ion-justify-content-center">
          <img src="/assets/images/thana-icon.svg" (click)="moveToThana()">
          <span class="count d-flex ion-align-items-center ion-justify-content-center">{{
            +santDetails?.thana_member_count }}</span>
        </div>
        <p class="ion-no-margin ion-padding-horizontal">Thana <ng-container></ng-container>
        </p>
      </div>
      <div class="chaturmas d-flex ion-align-items-center ion-justify-content-center"
        [ngClass]="{'red': !santDetails?.current_chaturmas_count}" (click)="moveToChaurmas()">
        <div class="chaturmas-icon d-flex ion-align-items-center ion-justify-content-center">
          <img src="/assets/images/chaturmas-{{!santDetails?.current_chaturmas_count ? 'red-':''}}icon.svg">
          <span class="count d-flex ion-align-items-center ion-justify-content-center">{{
            +santDetails?.current_chaturmas_count }}</span>
        </div>
        <p class="ion-no-margin ion-padding-horizontal">Chaturmas</p>
      </div>
      <div class="chaturmas d-flex ion-align-items-center ion-justify-content-center"
        [ngClass]="{'red': !santDetails?.upcoming_vihar_count}" (click)="moveToVihar()">
        <div class="chaturmas-icon d-flex ion-align-items-center ion-justify-content-center">
          <img src="/assets/images/vihar-{{!santDetails?.upcoming_vihar_count ? 'red-':''}}icon.svg">
          <span class="count d-flex ion-align-items-center ion-justify-content-center">{{
            santDetails?.upcoming_vihar_count }}</span>
        </div>
        <p class="ion-no-margin ion-padding-horizontal">Vihaar</p>
      </div>
    </div>
  </div>
  <app-sant-location *ngIf="santDetails" [santDetails]="santDetails"
    (updated)="getSantDetails(false)"></app-sant-location>
  <app-sant-post *ngFor="let post of santPostList; let index = index" [post]="post"></app-sant-post>
  <ion-infinite-scroll threshold="250px" (ionInfinite)="getSantPostList(true, $event)"
    *ngIf="santPageNumber <= santTotalPage">
    <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>
<app-footer></app-footer>
