<ion-header>
  <ion-toolbar mode="ios" class="sangh">
    <ion-buttons slot="start">
      <ion-back-button mode="md" defaultHref="page/shravak-feeds"></ion-back-button>
    </ion-buttons>
    <ion-title class="back-btn">Sangh profile</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content class="sangh">
  <div class="bg">
    <ion-avatar class="ion-margin-start profile-bg">
      <img src="/assets/images/sangh-profile.png"
        (click)="utilityService.imagePreview('/assets/images/sangh-profile.png')" *ngIf="!sanghData?.avatar" />
      <img [src]="sanghData?.avatar" (click)="utilityService.imagePreview(sanghData?.avatar)"
        *ngIf="sanghData?.avatar" />
    </ion-avatar>
    <h3>{{sanghData?.name}}</h3>
    <p (click)="addressPost(sanghData); $event.stopPropagation()">{{sanghData?.address}}</p>
    <div class="points">
      <ion-icon name="star" slot="end"></ion-icon> karmā points | <span>{{sanghData?.karma_points}}</span>
    </div>
    <div *ngIf="sanghData?.is_member === 1" class="admin-view">
      <ion-button mode="md" class="si" expand="inline-block" (click)="createPost()"
        [disabled]="sanghData?.sangh_status !== 1"><img src="/assets/images/plus-icon.svg" /> Create post</ion-button>
      <ion-button mode="md" class="si" expand="inline-block" (click)="shareProfile()"
        [disabled]="sanghData?.sangh_status !== 1"><img src="/assets/images/invite-icon.svg" /> Invite</ion-button>
      <ion-button mode="md" class="si" expand="inline-block" *ngIf="sanghData?.sangh_status !== 0"
        (click)="memberCard()">
        <img src="/assets/images/member-id.svg" />MEMBER ID</ion-button>
      <ion-button mode="md" class="si" expand="inline-block" *ngIf="sanghData?.sangh_status !== 0"
        (click)="editProfile()"><img src="/assets/images/edit-sangh-icon.svg" /> Edit profile</ion-button>
    </div>
    <div *ngIf="sanghData?.is_member === 0 || sanghData?.is_member === 2" class="member-view"
      [ngClass]="{'member-label': sanghData?.is_member === 2}">
      <ion-button mode="md" class="si" expand="inline-block" (click)="followSangh($event, sanghData)"
        *ngIf="sanghData?.is_member !== 2" [disabled]="sanghData?.sangh_status !== 1">{{ sanghData?.is_user_following ?
        'Following' : 'Follow' }}</ion-button>

      <ion-button mode="md" class="si" expand="inline-block" *ngIf="sanghData?.is_member === 2" (click)="memberCard()">
        <img src="/assets/images/member-id.svg" />MEMBER ID</ion-button>

      <app-join-sangh-button [sangh]="sanghData" [userData]="userData" page="profile"></app-join-sangh-button>

    </div>
  </div>

  <div class="reject-sangh" *ngIf="sanghData?.reject_reason && +sanghData?.sangh_status === 2 ">
    <div class="reject-sangh-content">
      <p>Sangh profile rejected by Admin</p>
      <p>Reason: <span>{{sanghData?.reject_reason}}</span></p>
    </div>
  </div>
  <div class="bottom-bg-location">
    <div class="sangh-members">
      <ion-card (click)="sanghData?.followers_count === 0 ? null : viewAllSangh(4)" class="follower"
        [ngClass]="{'disable-card': sanghData?.sangh_status !== 1}">
        <ion-card-header>
          <ion-card-title>
            <div><img src="/assets/images/friends-big-icon-sangh.svg"></div>
            <p>Followers<span>{{sanghData?.followers_count}}</span></p>
          </ion-card-title>
        </ion-card-header>
      </ion-card>

      <ion-card (click)="sanghData?.sangh_members_count === 0 ? null : membersDetail()" class="members"
        [ngClass]="{'disable-card': sanghData?.sangh_status !== 1}">
        <ion-card-header>
          <ion-card-title>
            <div class="green"><img src="/assets/images/sangh-fill-icon.svg"></div>
            <p>Members<span>{{sanghData?.sangh_members_count}}</span></p>
          </ion-card-title>
        </ion-card-header>
      </ion-card>

      <ion-card class="vihar" (click)="viewVihar()" [ngClass]="{'disable-card': sanghData?.sangh_status !== 1}">
        <ion-card-header>
          <ion-card-title>
            <div class="green"><img src="/assets/images/vihar-icon.svg"></div>
          </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-sangh.svg"></div>
            <p>Dharm <span>{{sanghData?.dharma?.name}}</span></p>
          </ion-card-title>
          <ion-card-title>
            <div class="icons"><img src="/assets/images/mother-tongue-sangh.svg"></div>
            <p>Samprday<span>{{sanghData?.sampraday?.name}}</span></p>
          </ion-card-title>
        </ion-card-header>
        <ion-button mode="md" class="si" expand="inline-block" id="post-trigger-button" (click)="aboutSangh()">See more
          about
          sangh</ion-button>
      </ion-card>
    </div>
    <app-post [_postData]="post" [_type]="'sangh'" [_currentUserId]="userData.id"
      [_isEditable]="sanghData?.is_member === 1" [_fromPage]="'sangh-profile'" (updatePostEvent)="updatePost($event)"
      (deletePostEvent)="deletePost($event)" *ngFor="let post of postList;let index = index">
    </app-post>
  </div>
</ion-content>
<app-footer></app-footer>