<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">Thana List</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content class="sant">
  <h3 *ngIf="thanaList?.length === 0" class="ion-text-center"><img src="/assets/images/welcome-sant.svg">
    <p>No Thana found</p>
  </h3>
  <ion-card *ngFor="let thana of thanaList;let i = index">
    <ion-list [ngClass]="{'thana-leader': thana.pivot.is_leader === 1 && thana.pivot.is_approved === 1}">
      <ion-item>
        <ion-avatar slot="start" (click)="moveToSantProfile(thana?.id)">
          <img [src]="thana?.avatar || '/assets/images/sant-profile.png'" />
        </ion-avatar>
        <ion-label [ngClass]="{'thana-title': thana.pivot.is_leader === 1 && thana.pivot.is_approved === 1}">
          <h3>
            <p *ngIf="thana.pivot.is_approved === 0" class="not-apprved">
              <span class="in-review">In Review</span>
            </p>
            {{ thana?.name}}
            <p>Dharam: <span>{{ thana?.dharm?.name }}</span></p>
            <p>Sampraday: <span>{{ thana?.sampraday?.name }}</span> </p>
          </h3>
          <div>
            <div class="thana-icon" *ngIf="thana.pivot.is_leader === 1 && thana.pivot.is_approved === 1">
              <img src="/assets/images/thana-leader.svg" />
            </div>
            <ion-icon name="ellipsis-vertical" id="post-trigger-button-{{i}}" (click)="$event.stopPropagation()"
              *ngIf="thana.id !== santId && thana.pivot.is_approved === 1"></ion-icon>
          </div>
        </ion-label>
      </ion-item>
      <ion-popover *ngIf="thana.id !== santId && thana.pivot.is_approved === 1" trigger="post-trigger-button-{{i}}"
        [dismissOnSelect]="true">
        <ng-template>
          <ion-content>
            <ion-list>
              <ion-item [button]="true" [detail]="false" *ngIf="!is_leader_exist" (click)="makeLeader(i, thana)">
                <ion-label>Make a Leader </ion-label>
              </ion-item>
              <ion-item [button]="true" [detail]="false" (click)="deleteThana(i, thana)">
                <ion-label class="delete-thana">Delete</ion-label>
              </ion-item>
            </ion-list>
          </ion-content>
        </ng-template>
      </ion-popover>
    </ion-list>
  </ion-card>
  <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-fab horizontal="end" vertical="bottom" slot="fixed">
    <ion-fab-button (click)="addThana()">
      <ion-icon name="add"></ion-icon>
    </ion-fab-button>
  </ion-fab>
</ion-content>
