<div bsModal #modal="bs-modal" (onShown)="onShown()" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal" aria-hidden="true" [config]="{backdrop: 'static'}">
  <div class="modal-dialog modal-md">
    <div class="modal-content">
      <form *ngIf="active" #proximityForm="ngForm" novalidate (ngSubmit)="save()">
        <div class="modal-header">
            <h4 class="modal-title">
            <span>{{"EditProximity" | localize}}</span>
          </h4>
          <button type="button" class="close" (click)="close()" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>          
        </div>
        <div class="modal-body">

          <div class="form-group">
             <label>{{"Value" | localize}}</label>
            <input #valueInput class="form-control" type="number" name="value" [(ngModel)]="proximity.value" required maxlength="32">            
          </div>
          <div class="form-group">
            
                
                
            
                    <!-- <p-autoComplete 
                                    [(ngModel)]="txtLocation"
                                    [ngModelOptions]="{standalone: true}"
                                    id="txtLocation"
                                    [suggestions]="locations"
                                    (completeMethod)="showAllLocation($event)"
                                    [minLength]="1"
                                    field="name"
                                    dataKey="id"
                                    name="txtLocation"
                                    styleClass="width-percent-100"
                                    [style]="{'width':'100%'}"
                                    [inputStyle]="{'width':'95%','height':'33px'}"
                                    [dropdown]="true">
                    </p-autoComplete> -->
                     <label>{{"Location" | localize}}</label>
                    <select class="form-control kt-select2" id="txtLocation" data-placeholder="Select Location" name="txtLocation" tabindex="-1" aria-hidden="true">
                        <option  *ngFor="let location of locations" value="{{location.id}}" [selected]="location.id ===  txtLocation">{{location.name}}</option>
                    </select>
                
                
               
          </div>
          <div class="form-group">
            
                
                
            
                    <!-- <p-autoComplete 
                                    [(ngModel)]="txtAddressType"
                                    id="txtAddressType"
                                    [suggestions]="addressTypes"
                                    (completeMethod)="showAllAddressType($event)"
                                    field="name"
                                    [minLength]="1"
                                    name="txtAddressType"
                                    inputStyleClass="form-control"
                                    [ngModelOptions]="{standalone: true}"
                                    styleClass="width-percent-100">
                    </p-autoComplete> -->
                    <!-- <p-autoComplete 
                                  [(ngModel)]="txtAddressType"
                                  id="txtAddressType"
                                  [suggestions]="addressTypes"
                                  (completeMethod)="showAllAddressType($event)"
                                  [minLength]="1"
                                  name="txtAddressType"
                                  field="name"
                                  datakey="id"
                                  [ngModelOptions]="{standalone: true}"
                                  styleClass="width-percent-100"
                                  [style]="{'width':'100%'}"
                                  [inputStyle]="{'width':'95%','height':'33px'}"
                                  [dropdown]="true">
             
                                  >
                                
                    </p-autoComplete> -->
                     <label>{{"AddressType" | localize}}</label>
                    <select class="form-control kt-select2" id="txtAddressType" data-placeholder="Select Address Type" name="txtAddressType" tabindex="-1" aria-hidden="true">
                        <option  *ngFor="let addressType of addressTypes" value="{{addressType.id}}" [selected]="addressType.id ===  txtAddressType">{{addressType.name}}</option>
                    </select>
                
                
               
          </div>
          
        </div>
        <div class="modal-footer">
          <button [disabled]="saving" type="button" class="btn btn-secondary btn-elevate btn-pill" (click)="close()">{{"Cancel" | localize}}</button>
          <button type="submit" class="btn btn-primary btn-elevate btn-pill" [disabled]="!proximityForm.form.valid" [buttonBusy]="saving" [busyText]="l('SavingWithThreeDot' | localize)"><i class="fa fa-save"></i> <span>{{"Save" | localize}}</span></button>
        </div>
      </form>
    </div>
  </div>
</div>