<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>{{"AddProximity" | 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">
            
            <input #valueInput class="form-control" inputStyleClass="form-control" styleClass="width-percent-100"  placeholder="{{'Value' | localize}}" type="number" name="value" [(ngModel)]="proximity.value" required maxlength="32">            
          </div>
          <div class="form-group">
            
                
                
            
                    
                    <!-- <p-autoComplete [(ngModel)]="locationInput"
                                    id="locationInput"
                                    [suggestions]="locations"
                                    (completeMethod)="showAllLocation($event)"
                                    field="name"
                                    dataKey="id"
                                    placeholder="{{'Location' | localize}}"
                                    [minLength]="1"
                                    name="Location"
                                    styleClass="width-percent-100"
                                    [style]="{'width':'100%'}"
                                    [inputStyle]="{'width':'95%','height':'33px'}"
                                    [dropdown]="true">
                    </p-autoComplete> -->

                            
                   
                    
                    
                      <select class="form-control kt-select2" data-placeholder="Select Location" id="locationInput" name="Location" tabindex="-1" aria-hidden="true">
                          <option></option>
                          <option  *ngFor="let location of locations" value="{{location.id}}">{{location.name}}</option>
                      </select>
                    
                  
                  
          </div>
          <div class="form-group">
            
                  
                  <select class="form-control kt-select2" data-placeholder="Select AddressType" id="addressTypeInput" name="addressType" tabindex="-1" aria-hidden="true">
                      <option></option>
                      <option  *ngFor="let addressType of addressTypes" value="{{addressType.id}}">{{addressType.name}}</option>
                  </select>
                
            
                    
                   <!--  <p-autoComplete [(ngModel)]="addressTypeInput"
                                    id="addressTypeInput"
                                    [suggestions]="addressTypes"
                                    (completeMethod)="showAllAddressType($event)"
                                    field="name"
                                    dataKey="id"
                                    placeholder="{{'AddressType' | localize}}"
                                    [minLength]="1"
                                    name="AddressType"
                                    styleClass="width-percent-100"
                                    [style]="{'width':'100%'}"
                                    [inputStyle]="{'width':'95%','height':'33px'}"
                                    [dropdown]="true">
                    </p-autoComplete> -->
                
                
               
          </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>