<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">{{type === 'member' ? 'Add members' : 'Invite members'}}</ion-title>
  </ion-toolbar>
  <ion-item class="search">
    <ion-input placeholder="Search shravak" (ionInput)="searchSangh()" [debounce]="250" [(ngModel)]="searchValue"
      clearInput="true"></ion-input>
  </ion-item>
</ion-header>
<ion-content class="sangh">
  <ion-list class="ion-margin-top">
    <div *ngFor="let user of userList; let i = index" class="ion-padding-horizontal mb-5">
      <ion-checkbox color="primary" checked slot="end" [checked]="user.checked === true"
        (ionChange)="onChange($event, i, user.id)">
        <ion-label>
          <div>
            <img [src]="user?.avatar || '/assets/images/shravak-profile.png'" />
          </div>
          <p class="radio-btn-label"> {{user.name}}</p>
        </ion-label>
      </ion-checkbox>
    </div>
  </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>
<ion-footer class="sangh">
  <ion-button mode="md" class="si" expand="block" id="trigger-button" (click)="addMembers()"
    [disabled]="selectedUserList.length === 0">Add Member</ion-button>
</ion-footer>
