<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">Search sangh<ion-icon name="filter" id="trigger-button"></ion-icon>
    </ion-title>
  </ion-toolbar>
  <ion-item class="search">
    <ion-input placeholder="Search sangh" (ionInput)="searchSangh()" [debounce]="250" [(ngModel)]="searchValue"
      clearInput="true"></ion-input>
  </ion-item>
</ion-header>

<ion-content class="sangh">
  <ion-card *ngIf="!spinnerFlag" class="ion-text-center">
    <ion-spinner name="lines"></ion-spinner>
  </ion-card>
  <h3 *ngIf="spinnerFlag && sanghList?.length === 0" class="ion-text-center"><img
      src="/assets/images/welcome-sangh.svg">
    <p>No Sangh found. Please try again.</p>
  </h3>
  <ion-list *ngFor="let sangh of sanghList; let index = index">
    <ion-item>
      <ion-avatar slot="start" (click)="sanghProfile(sangh.id)">
        <img [src]="sangh?.avatar || '/assets/images/sangh-profile.png'" />
      </ion-avatar>
      <ion-label>
        <h3 (click)="sanghProfile(sangh.id)">{{ sangh?.name }} <p *ngIf="sangh?.dharma?.name">{{ sangh?.dharma?.name }}
          </p>
          <p *ngIf="sangh?.sampraday?.name">({{ sangh?.sampraday?.name }})</p>
        </h3>
        <ion-button mode="md" class="following" (click)="followSangh($event, sangh.id, index)"
          *ngIf="sangh?.is_user_following && sangh?.is_member === 0">
          Following</ion-button>
        <ion-button mode="md" (click)="followSangh($event, sangh.id, index)"
          *ngIf="!sangh?.is_user_following && sangh?.is_member === 0">Follow</ion-button>
        <ion-button mode="md" *ngIf="sangh?.sangh_member_status === 1">Member</ion-button>
        <ion-button mode="md" *ngIf="sangh?.sangh_member_status === 2" class="ml-2"
          (click)="acceptDeclineSanghMember(sangh)">
          Accept/Decline</ion-button>
        <ion-button mode="md" *ngIf="sangh?.sangh_member_status === 3" class="ml-2" (click)="cancelSanghRequest(sangh)">
          Requested</ion-button>
      </ion-label>
    </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>
<ion-modal class="sangh-filter" trigger="trigger-button">
  <ng-template>
    <ion-content class="global-form ion-padding-horizontal">
      <h4>Sangh Filter</h4>

      <div class="mb-20">
        <label position="stacked" class="normal-label">Dharm</label>
        <ion-select mode="ios" interface="action-sheet" [(ngModel)]="dharma_id" placeholder="Select"
          class="custom-select custom-arrow" (ionChange)="onDharmChange()">
          <ion-select-option [value]="dharma?.id" *ngFor="let dharma of dharmaDetails">{{dharma.name}}
          </ion-select-option>
        </ion-select>
      </div>

      <div class="mb-20">
        <label position="stacked" class="normal-label">Sampraday</label>
        <ionic-selectable [items]="sampradayDetails" itemValueField="id" itemTextField="name" [canSearch]="true"
          [(ngModel)]="sampraday_id" [disabled]="!dharma_id" [canClear]="true" placeholder="Select"
          (onChange)="onSampradayChange()" [isMultiple]="true">
        </ionic-selectable>
      </div>

      <div class="mb-20">
        <label position="stacked" class="normal-label">Location</label>
        <input type="text" keyboardFix [(ngModel)]="location" id="personalLocation" #personalLocation
          placeholder="Location" maxlength="1000" class="location-input" (click)="initAutocomplete()"
          (keyup)="removeLatAndLong()">
      </div>

      <div class="filter-btn">
        <ion-button mode="md" class="si" expand="inline-block" (click)="advanceSearch()">Filter</ion-button>
        <ion-button mode="md" class="si" expand="inline-block" (click)="resetFilter()">Reset</ion-button>
      </div>
    </ion-content>
  </ng-template>
</ion-modal>
