<ion-header>
  <ion-toolbar mode="ios" class="sangh">
    <ion-buttons slot="start">
      <ion-back-button mode="md"></ion-back-button>
    </ion-buttons>
    <ion-title class="back-btn">{{title}}</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content class="sangh">
  <ion-card *ngIf="!spinnerFlag" class="ion-text-center">
    <ion-spinner name="lines"></ion-spinner>
  </ion-card>
  <h3 *ngIf="noDataFlag && sanghList?.length === 0" class="ion-text-center"><img src="/assets/images/welcome-sangh.svg">
    <p *ngIf="sanghListType !== '1' && sanghListType !== '4'">No data found</p>
    <p *ngIf="sanghListType === '1'">By following Sangh, you can know live updates on Sangh's events and broadcasts.
      Please use Global search for the Sangh to follow. </p>
    <p *ngIf="sanghListType === '4'">Sangh has no followers. By following Sangh, you can know live updates on Sangh's
      events and broadcasts. Click follow button now.</p>
  </h3>
  <ion-list *ngFor="let sangh of sanghList; let index = index">
    <ion-item (click)="sanghProfile(sangh.id)">
      <ion-avatar slot="start">
        <img [src]="sangh?.avatar || '/assets/images/sangh-profile.png'" />
      </ion-avatar>
      <ion-label>
        <h3>{{ sangh?.name }} <p *ngIf="sanghListType !== '4' && sanghListType !== '6'">{{ sangh?.address }}</p>
        </h3>

        <ion-icon name="trash-sharp" class="delete-sangh" slot="end" *ngIf="sanghListType === '6'"
          (click)="deleteSangh(sangh.id , index); $event.stopPropagation()"></ion-icon>

        <ion-button mode="md" (click)="followSangh($event, sangh, index); $event.stopPropagation();"
          *ngIf="sanghListType !== '2' && sanghListType !== '4' && sanghListType !== '5' && sanghListType !== '6'">{{
          sangh?.is_user_following ?
          'Following' : 'Follow' }}</ion-button>
      </ion-label>
      <ion-chip *ngIf="sangh.is_member && sanghListType === '5'" class="member">
        <ion-label>
          Member
        </ion-label>
      </ion-chip>
      <ion-chip (click)="joinSangh(sangh); $event.stopPropagation()" *ngIf="!sangh.is_member && sanghListType === '5'"
        [ngClass]="{'requested' : sangh.is_requested === true }">
        <ion-label>
          {{sangh.is_requested === true ? 'Requested' : 'Join'}}
        </ion-label>
      </ion-chip>
    </ion-item>
  </ion-list>

  <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>
</ion-content>