<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">Invitations</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 && invitationList?.length === 0" class="ion-text-center"><img
      src="/assets/images/welcome-sangh.svg">
    <p>Please request Sangh's core committee to send Invitation.</p>
  </h3>
  <ion-card>
    <ion-card-header>
      <ion-card-title *ngFor="let invitation of invitationList; let index = index">
        <div class="left-data">
          <div class="icons">
            <span>
              <img [src]="invitation?.extra_fields?.avatar || '/assets/images/sangh-profile.png'"
                (click)="moveToSangh(invitation?.extra_fields?.sangh_id)" />
            </span>
            <div>
              <img src="/assets/images/sangh-fill-icon.svg" (click)="moveToSangh(invitation?.extra_fields?.sangh_id)">
            </div>
          </div>
          <div class="content">
            <p>{{invitation.extra_fields.name}} <span>{{invitation.message}} </span>
            </p>
            <ion-button mode="md" class="si" expand="inline-block"
              (click)="acceptDeclineSanghMember(invitation, 1, index)">Accept
            </ion-button>
            <ion-button mode="md" class="si delete-btn" expand="inline-block"
              (click)="acceptDeclineSanghMember(invitation, 2, index)">Decline</ion-button>
          </div>
        </div>
      </ion-card-title>
      <ion-infinite-scroll threshold="250px" (ionInfinite)="loadData($event)"
        *ngIf="invitationList.length !== invitationTotalCount">
        <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">
        </ion-infinite-scroll-content>
      </ion-infinite-scroll>
    </ion-card-header>
  </ion-card>
</ion-content>
