<ion-header>
  <ion-toolbar mode="ios" class="sant">
    <ion-buttons slot="start">
      <ion-back-button mode="md"></ion-back-button>
    </ion-buttons>
    <ion-title class="back-btn">Add thana</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content class="sant">
  <ol>
    <li>M.S of same Dharm and Sampraday</li>
    <li>M.S not added to other Thana</li>
  </ol>
  <ion-item class="search">
    <ion-input placeholder="Search thana" [debounce]="400" (ionInput)="searchSant($event)"
      clearInput="true"></ion-input>
  </ion-item>
  <ion-card>
    <ion-list>
      <ion-item *ngFor="let sant of santList; let index = index">
        <ion-avatar slot="start">
          <img [src]="sant?.avatar || '/assets/images/sant-profile.png'" />
        </ion-avatar>
        <ion-label>
          <h3>{{ sant?.name }} <p>Dharm: <span>{{ sant?.dharm?.name }} </span></p>
            <p>Sampraday: <span>{{ sant?.sampraday?.name }}</span> </p>
          </h3>
          <ion-button (click)="addSant(index)" *ngIf="sant?.isAdded" mode="md">Add</ion-button>
          <ion-button (click)="removeSant(index)" *ngIf="!sant?.isAdded" mode="md">Remove</ion-button>
        </ion-label>
      </ion-item>
    </ion-list>
  </ion-card>
  <ion-infinite-scroll threshold="250px" (ionInfinite)="loadData($event)" *ngIf="santList?.length !== totalCount">
    <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
  <h3 *ngIf="santList?.length === 0" class="ion-text-center"><img src="/assets/images/no-data-found-image.svg">
    <p>No M.S found to add</p>
  </h3>
</ion-content>
<ion-footer class="sant">
  <ion-button class="si" expand="block" (click)="addThana()" mode="md" [disabled]="santIdArray.length === 0">Add
    Thana</ion-button>
</ion-footer>
