<ion-header>
  <ion-toolbar mode="ios">
    <ion-buttons slot="start">
      <ion-back-button mode="md" defaultHref="page/shravak-feeds"></ion-back-button>
    </ion-buttons>
    <ion-title class="back-btn">Shravak profile</ion-title>
    <ion-icon name="ellipsis-vertical" slot="end" id="more-options"></ion-icon>
  </ion-toolbar>
  <ion-popover trigger="more-options" [dismissOnSelect]="true">
    <ng-template>
      <ion-content>
        <ion-list>
          <ion-item [button]="true" [detail]="false" (click)="shareProfile();">
            <ion-icon name="share-social" slot="start" size="small"></ion-icon>
            <ion-label>Share</ion-label>
          </ion-item>
          <ion-item [button]="true" [detail]="false" (click)="openReport();">
            <ion-icon name="flag" slot="start" size="small"></ion-icon>
            <ion-label>Report user</ion-label>
          </ion-item>
          <ion-item [button]="true" [detail]="false" (click)="blockUser();">
            <ion-icon name="ban" slot="start" size="small"></ion-icon>
            <ion-label>{{ userProfileData?.is_blocked ? 'Unblock' : 'Block' }} user</ion-label>
          </ion-item>
        </ion-list>
      </ion-content>
    </ng-template>
  </ion-popover>
</ion-header>
<ion-content>
  <div class="bg">
    <ion-avatar class="ion-margin-start profile-bg">
      <img src="/assets/images/shravak-profile.png"
        (click)="utilityService.imagePreview('/assets/images/shravak-profile.png')" *ngIf="!userProfileData?.avatar" />
      <img [src]="userProfileData?.avatar" (click)="utilityService.imagePreview(userProfileData?.avatar)"
        *ngIf="userProfileData?.avatar" />
    </ion-avatar>
    <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>
    <div>
      <ion-button *ngIf="userProfileData?.request_status !== 3" class="si" expand="inline-block" mode="md"
        (click)="sendConnectionRequest(userProfileData?.id, userProfileData?.request_status)"
        [disabled]="userProfileData?.is_blocked">
        <span *ngIf="userProfileData?.request_status === 4">Connect</span>
        <span *ngIf="userProfileData?.request_status === 0">Requested</span>
        <span *ngIf="userProfileData?.request_status === 1">Connected</span>
      </ion-button>
      <ion-button *ngIf="userProfileData?.request_status === 3" class="si" expand="inline-block" mode="md"
        (click)="sendConnectionRequest(userProfileData?.id, userProfileData?.request_status, 1)">
        Accept
      </ion-button>
      <ion-button *ngIf="userProfileData?.request_status === 3" class="si delete" expand="inline-block" mode="md"
        (click)="sendConnectionRequest(userProfileData?.id, userProfileData?.request_status, 2)">
        Delete
      </ion-button>
      <ion-button class="si" expand="inline-block" (click)="moveToMessage()" mode="md">
        <ion-icon name="star-outline" name="chatbox-ellipses" slot="end"></ion-icon>
      </ion-button>
    </div>
  </div>
  <div class="bottom-bg-location">
    <div class="sangh-members">
      <ion-card (click)="userProfileData?.friend_count === 0 ? null : goToFriendList()">
        <ion-card-header>
          <ion-card-title>
            <div><img src="/assets/images/friends-big-icon.svg"></div>
            <p>Connections<span>{{userProfileData?.friend_count}}</span></p>
          </ion-card-title>
        </ion-card-header>
      </ion-card>
      <ion-card (click)="userProfileData?.sangh_member_count === 0 ? null : 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')">
            <ion-icon name="location"></ion-icon>
            <p>Native Place<span>{{userProfileData?.native_place}}</span></p>
          </ion-card-title>
          <ion-card-title (click)="address('current')">
            <ion-icon name="location"></ion-icon>
            <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 about info</ion-button>
      </ion-card>
    </div>
    <app-post [_postData]="post" [_type]="'shravak'" [_currentUserId]="userData.id"
      [_fromPage]="'shravak-other-profile'" *ngFor="let post of postList">
    </app-post>
    <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>
  </div>
</ion-content>
<app-footer></app-footer>
