<div class="bottom-bg-location ion-padding-horizontal ion-padding-bottom ion-margin-bottom">
  <div class="d-flex ion-justify-content-between ion-align-items-center">
    <h5>Current location</h5>
    <ion-button mode="md" class="edit-btn ion-no-padding" (click)="isModalOpen = true">
      <img slot="icon-only" src="/assets/images/{{santDetails.sant_location ? 'edit-icon-white': 'plus-icon'}}.svg">
    </ion-button>
  </div>
  <ion-card class="ion-no-margin">
    <ion-card-header class="ion-no-padding" *ngIf="santDetails.sant_location">
      <ion-card-title class="d-flex ion-align-items-center">
        <ion-icon (click)="address(santDetails)" name="location"></ion-icon>
        <div class="full-address">{{ santDetails.sant_location }} </div>
      </ion-card-title>
    </ion-card-header>
    <ion-card-content class="d-flex ion-justify-content-between ion-no-padding">
      <ng-template [ngIf]="santDetails.sant_location">
        <p class="ion-no-padding">Last update: <span (click)="goToProfile()">
            {{ santDetails.sant_location_updated_by.name || santDetails.sant_location_created_by.name ||
            'Global Jain Member' }}
          </span>
        </p>
        <p class="ion-no-padding">{{ santDetails.sant_location_updated_by.updated_ago ||
          santDetails.sant_location_created_by.created_ago }}
        </p>
      </ng-template>
      <ng-template [ngIf]="!santDetails.sant_location">
        <p class="ion-no-padding">If you know the current location of <strong>{{ santDetails.name }}</strong>, please
          add</p>
      </ng-template>
    </ion-card-content>
    <p class="notes ion-no-margin" *ngIf="santDetails.is_vihaar_location"><strong>Note: </strong>Last Vihaar location is
      the current
      location</p>
  </ion-card>
</div>
<ion-modal [isOpen]="isModalOpen" (willDismiss)="isModalOpen = false">
  <ng-template>
    <div class="wrapper sant" novalidate>
      <p class="ion-no-margin ion-margin-top ion-padding-horizontal mb-10">Please select</p>
      <ion-list class="ion-no-padding mb-10">
        <ion-radio-group class="d-flex" [(ngModel)]="addressType" mode="md">
          <ion-item class="ion-no-margin">
            <ion-radio labelPlacement="end" [value]="1">By Location</ion-radio>
          </ion-item>
          <ion-item class="ion-no-margin">
            <ion-radio labelPlacement="end" [value]="2">By Sangh</ion-radio>
          </ion-item>
        </ion-radio-group>
      </ion-list>
      <ion-item class="ion-no-margin" *ngIf="addressType === 1">
        <ion-label position="stacked"></ion-label>
        <input type="text" keyboardFix id="Location" [(ngModel)]="addLocation" #Location
          placeholder="Start typing to search location" maxlength="1000" class="input" (click)="initAutocomplete()"
          (keyup)="removeLatAndLong()">
      </ion-item>
      <ion-item class="ion-no-margin" *ngIf="addressType === 2">
        <ion-label position="stacked"></ion-label>
        <ionic-selectable class="ion-no-margin input" #sanghListComponent #search="ngModel" [items]="sanghList"
          label="test" itemValueField="id" searchText="" itemTextField="name" [canSearch]="true" [searchDebounce]="250"
          [canClear]="false" (onSearch)="searchSangh($event)" (onChange)="addSangh($event)" placeholder="Select sangh"
          searchPlaceholder="Search sangh" [(ngModel)]="selectedSangh" [hasInfiniteScroll]="true"
          (onInfiniteScroll)="getMoreSangh($event)">
          <ng-template ionicSelectableItemTemplate let-sangh="item" let-isPortSelected="isItemSelected">
            <div class="d-flex ion-align-items-center ion-margin-start">
              <ion-avatar slot="start" class="sangh-avatar">
                <img [src]="sangh.avatar" />
              </ion-avatar>
              <ion-label class="ion-text-wrap">
                <p>{{ sangh.name }}</p>
              </ion-label>
            </div>
          </ng-template>
        </ionic-selectable>
        <div *ngIf="!selectedSangh?.id && (search.control.touched || search.control.dirty)">
          <span class="error"> Please select sangh. </span>
        </div>
      </ion-item>
      <ion-item class="ion-no-margin ion-margin-top ion-align-items-baseline">
        <ion-checkbox class="ion-no-margin ion-margin-end" #confirm="ngModel" slot="start" labelPlacement="end"
          mode="md" [(ngModel)]="confirmed">
          <label class="ion-text-wrap checkbox-label">I agree that current location is accurate.</label>
        </ion-checkbox>
      </ion-item>
      <div class="ion-margin-start" *ngIf="!confirmed && confirm.control.dirty">
        <span class="error"> Please tick the checkbox as confirmation. </span>
      </div>
      <ion-buttons class="ion-margin-top ion-justify-content-around" slot="secondary">
        <ion-button mode="md" color="primary"
          [disabled]="(addressType === 1 && !addLocation) || (addressType === 2 && !selectedSangh?.id)"
          (click)="submitLocation()">
          <strong>UPDATE</strong>
        </ion-button>
        <ion-button mode="md" color="primary" (click)="isModalOpen = false"> CANCEL </ion-button>
      </ion-buttons>
    </div>
  </ng-template>
</ion-modal>
