<ion-button *ngIf="page === 'create-sangh'" (click)="joinSangh(sangh); $event.stopPropagation()">
  {{sangh.sangh_member_status === 3 ? 'Requested' : 'Join'}}
</ion-button>
<ion-chip *ngIf="page === 'global-search'" (click)="joinSangh(sangh); $event.stopPropagation()"
  [ngClass]="{'requested' : sangh.sangh_member_status === 3 }">
  <ion-label>
    {{sangh.sangh_member_status === 3 ? 'Requested' : 'Join'}}
  </ion-label>
</ion-chip>
<ng-template [ngIf]="page === 'profile'">
  <ion-button mode="md" class="si" expand="inline-block" *ngIf="sangh?.sangh_member_status === 0"
    (click)="joinSangh(sangh); $event.stopPropagation()">
    Request for member</ion-button>
  <!-- <ion-button mode="md" class="si m-label ml-2" expand="inline-block" *ngIf="sangh?.sangh_member_status === 1">
    Member</ion-button> -->
  <ion-button mode="md" class="si m-label ml-2" expand="inline-block" *ngIf="sangh?.sangh_member_status === 2"
    (click)="acceptDecline()">
    Accept/Decline</ion-button>
  <ion-button mode="md" class="si m-label ml-2" expand="inline-block" *ngIf="sangh?.sangh_member_status === 3"
    (click)="joinSangh(sangh); $event.stopPropagation()">
    Requested</ion-button>
</ng-template>
<ion-modal [isOpen]="isModalOpen" (willDismiss)="isModalOpen = false">
  <ng-template>
    <div class="wrapper sangh global-form" [formGroup]="joinSanghForm" novalidate>

      <div class="mb-20 ion-no-margin">
        <label position="stacked" class="normal-label">Join Sangh as</label>
        <ion-select mode="ios" interface="action-sheet" placeholder="Select" formControlName="joinType"
          class="custom-select custom-arrow" (ionChange)="onTypeChange()">
          <ion-select-option value="member">Member</ion-select-option>
          <ion-select-option value="committee">Core Committee Member</ion-select-option>
        </ion-select>
      </div>

      <div class="mb-20 ion-no-margin" fill="outline" *ngIf="joinSanghForm.value.joinType === 'committee'">
        <label position="stacked" class="normal-label">Role Title</label>
        <ion-input placeholder="Enter role title" formControlName="roleName"></ion-input>
        <div
          *ngIf="joinSanghForm.get('roleName')?.invalid && (joinSanghForm.get('roleName')?.dirty || joinSanghForm.get('roleName')?.touched)">
          <span *ngIf="joinSanghForm.get('roleName')?.errors?.required" class="error">
            Role title is required.
          </span>
        </div>
      </div>

      <ion-buttons class="ion-margin-top" slot="secondary">
        <ion-button mode="md" color="primary" (click)="confirmJoin()"> <strong>JOIN</strong> </ion-button>
        <ion-button mode="md" color="primary" (click)="isModalOpen = false"> CANCEL </ion-button>
      </ion-buttons>
    </div>
  </ng-template>
</ion-modal>