<ion-header>
  <ion-toolbar [ngSwitch]="friendRequestSegment" mode="ios" class="sangh">
    <ion-buttons slot="start">
      <ion-back-button mode="md"></ion-back-button>
    </ion-buttons>
    <ion-title class="back-btn">Members</ion-title>
    <ng-container *ngSwitchCase="'received'">
      <ion-button mode="md" slot="end" *ngIf="type === '1'" (click)="addMember(1)">Add committee member</ion-button>
    </ng-container>
    <ng-container *ngSwitchCase="'sent'">
      <ion-button mode="md" slot="end" *ngIf="type === '1'" (click)="addMember(2)">Add member</ion-button>
    </ng-container>
  </ion-toolbar>
</ion-header>
<ion-content class="sangh">
  <ion-segment [(ngModel)]="friendRequestSegment" mode="md">
    <ion-segment-button value="received">
      <ion-label>Core committee members</ion-label>
    </ion-segment-button>
    <ion-segment-button value="sent">
      <ion-label>Sangh members</ion-label>
    </ion-segment-button>
  </ion-segment>
  <div [ngSwitch]="friendRequestSegment" class="data">
    <div class="detail" *ngSwitchCase="'received'">
      <ion-card>
        <ion-card-header>
          <ion-card-title *ngFor="let member of coreMemberList; let i = index;">
            <div class="left-data">
              <div class="family-members icons" (click)="goToShravakProfile(member.pivot.user_id)">
                <img [src]="member?.avatar || '/assets/images/shravak-profile.png'" />
              </div>
              <div class="content" (click)="goToShravakProfile(member.pivot.user_id)">
                <p>{{member.name}}<span>{{(member.pivot.role ? member.pivot.role : '') + (member.pivot.status === 0 &&
                    member.sangh_member_status !== 1 ? '
                    (Pending)' : '')}}</span>
                  <span *ngIf="member.member_id">
                    Member ID : {{member.member_id}}
                  </span>
                </p>
              </div>
            </div>
            <div class="right-icon">
              <div class="edit-icon" style="margin-right: 5px"
                *ngIf="type === '1' && member.pivot.core_committee && member.sangh_member_status !== 2"
                (click)="updateMemberRole(member)">
                <img src="/assets/images/edit-sangh-icon.svg">
              </div>
              <ng-container *ngTemplateOutlet="actionButtons; context: { $implicit: member, type: 1, index: i }">
              </ng-container>
              <div class="edit-icon"
                *ngIf="canDeleteCoreCommittee && type === '1' && member.pivot.core_committee && member.sangh_member_status !== 2"
                (click)="deleteMember(member.id, 1, i)">
                <img src="/assets/images/delete.svg">
              </div>
            </div>
          </ion-card-title>
        </ion-card-header>
        <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-card>
    </div>
    <div class="detail" *ngSwitchCase="'sent'">
      <ion-card>
        <ion-card-header>
          <ion-card-title *ngFor="let member of memberList; let i = index;">
            <div class="left-data">
              <div class="family-members icons" (click)="goToShravakProfile(member.pivot.user_id)">
                <img [src]="member?.avatar || '/assets/images/shravak-profile.png'" />
              </div>
              <div class="content" (click)="goToShravakProfile(member.pivot.user_id)">
                <p>{{member.name}}
                  <span *ngIf="!member.member_id">
                    {{ member.pivot.core_committee ? (member.pivot.role ? member.pivot.role : '') +
                    (member.pivot.status === 0 && member.sangh_member_status !== 1 ? ' (Pending)' : '') : 'Member' +
                    (member.pivot.status === 0 && member.sangh_member_status !== 1 ? '
                    (Pending)' : '')}}
                  </span>
                  <span *ngIf="member.member_id">
                    Member ID : {{member.member_id}}
                  </span>
                </p>
              </div>
            </div>
            <div class="right-icon">
              <ng-container *ngTemplateOutlet="actionButtons; context: { $implicit: member, index: i }">
              </ng-container>
              <div class="edit-icon" *ngIf="(type === '1' && member.pivot.is_owner !== 1 && member.sangh_member_status !== 2) ||
                member.id === userData.id" (click)="deleteMember(member.id, 2, i)"><img
                  src="/assets/images/delete.svg">
              </div>
            </div>
          </ion-card-title>
        </ion-card-header>
        <ion-infinite-scroll threshold="250px" (ionInfinite)="loadMemberData($event)"
          *ngIf="pageNumberMember <= totalPageMember">
          <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">
          </ion-infinite-scroll-content>
        </ion-infinite-scroll>
      </ion-card>
    </div>
  </div>
</ion-content>
<ng-template #actionButtons let-member let-index="index">
  <ion-icon name="checkmark-outline" class="action-btn" *ngIf="type === '1' && member?.sangh_member_status === 2"
    (click)="acceptDeclineSanghMember(member, type, index, 'accept')"></ion-icon>
  <ion-icon name="close-outline" class="action-btn" *ngIf="type === '1' && member?.sangh_member_status === 2"
    (click)="acceptDeclineSanghMember(member, type, index, 'decline')"></ion-icon>
</ng-template>