<ion-header>
  <ion-toolbar mode="ios">
    <ion-buttons slot="start">
      <ion-back-button mode="md"></ion-back-button>
    </ion-buttons>
    <ion-title class="back-btn">Shravak profile</ion-title>
    <ion-icon name="share-social" slot="end" (click)="shareProfile()"></ion-icon>
  </ion-toolbar>
</ion-header>
<ion-content>
  <div class="bg">
    <div style="position: relative;">
      <ion-avatar class="ion-margin-start profile-bg">
        <div class="complete-progress" style="--progress: {{profileCompletionPercentage*3.6}}deg;">
          <img src="/assets/images/shravak-profile.png"
            (click)="utilityService.imagePreview('/assets/images/shravak-profile.png')"
            *ngIf="!userProfileData?.avatar" />
          <img [src]="userProfileData?.avatar | safeUrl" (click)="utilityService.imagePreview(userProfileData?.avatar)"
            *ngIf="userProfileData?.avatar" />
          <ion-button class="si" expand="inline-block" (click)="selectProfileImage(); $event.stopPropagation()"
            mode="md"><img src="/assets/images/edit-icon-white.svg"></ion-button>
        </div>
      </ion-avatar>
      <div class="update-profile-link" *ngIf="profileCompletionPercentage !== 100" (click)="goToAboutInfo('edit')">
        <span>{{profileCompletionPercentage}}% | Update Profile</span>
        <ion-icon name="chevron-forward-outline" class="ml-auto"></ion-icon>
      </div>
    </div>
    <h3>{{userProfileData?.name}}</h3>
    <p>{{userProfileData?.profession}}</p>
    <div class="points">
      <ion-icon name="star" slot="end"></ion-icon> karmā points |
      <span>{{userProfileData?.karma_dhan}}</span>
    </div>
    <ion-card class="profile-complete-indicator">
      <app-profile-complete-indicator page="shravak-profile"
        [percentage]="userProfileData?.profile_statistics?.profile_completion_percentage"
        [completed]="userProfileData?.is_profile_completed"
        (clicked)="goToAboutInfo('edit')"></app-profile-complete-indicator>
    </ion-card>
    <div>
      <ion-button class="si" expand="inline-block" (click)="moveToCreatePost()" mode="md"><img
          src="/assets/images/plus-icon.svg">&nbsp; Create post</ion-button>
      <ion-button class="si edit" expand="inline-block" (click)="goToAboutInfo('edit')" mode="md"><img
          src="/assets/images/edit-icon.svg">&nbsp; Edit profile</ion-button>
    </div>
  </div>
  <div class="bottom-bg-location">
    <div class="sangh-members">
      <ion-card (click)="goToFriendList()">
        <ion-card-header>
          <ion-card-title>
            <div><img src="/assets/images/friends-big-icon.svg"></div>
            <p>Connected<span>{{userProfileData?.friend_count}}</span></p>
          </ion-card-title>
        </ion-card-header>
      </ion-card>
      <ion-card (click)="viewAllSangh('5')">
        <ion-card-header>
          <ion-card-title>
            <div class="green"><img src="/assets/images/sangh-fill-icon.svg"></div>
            <p>Sangh member<span>{{userProfileData?.sangh_member_count}}</span></p>
          </ion-card-title>
        </ion-card-header>
      </ion-card>
    </div>
    <div class="about-info">
      <ion-card>
        <ion-card-header>
          <ion-card-title>
            <div class="icons"><img src="/assets/images/dharm.svg"></div>
            <p>Dharm<span>{{userProfileData?.dharma_name}}</span></p>
          </ion-card-title>
          <ion-card-title (click)="address('native')">
            <div class="icons"><img src="/assets/images/location.svg"></div>
            <p>Native Place<span>{{userProfileData?.native_place}}</span></p>
          </ion-card-title>
          <ion-card-title (click)="address('current')">
            <div class="icons"><img src="/assets/images/location.svg"></div>
            <p>Current Location<span>{{userProfileData?.location}}</span></p>
          </ion-card-title>
        </ion-card-header>
        <ion-button class="si" expand="block" (click)="goToAboutInfo()" mode="md">See your about info</ion-button>
      </ion-card>
    </div>
    <app-post [_postData]="post" [_type]="'shravak'" [_currentUserId]="userProfileData?.id" [_isEditable]="true"
      [_fromPage]="'shravak-profile'" (updatePostEvent)="updatePost($event)" (deletePostEvent)="deletePost($event)"
      *ngFor="let post of postList">
    </app-post>
    <ion-infinite-scroll threshold="250px" (ionInfinite)="loadData($event)" *ngIf="postList.length !== totalCount ">
      <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">
      </ion-infinite-scroll-content>
    </ion-infinite-scroll>
  </div>
</ion-content>
