<div bsModal #createModal="bs-modal" (onShown)="onShown()" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="createModal"
     aria-hidden="true" [config]="{backdrop: 'static', keyboard: !saving}">
    <div class="modal-dialog modal-md">

        <div class="modal-content">

            <form #vehicleLocationCreateForm="ngForm" role="form" novalidate class="form-validation" *ngIf="active" (submit)="save()">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <span>{{"CreateVehicleLocation" | localize}}</span>
                    </h5>
                    <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')" [disabled]="saving">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">

                      <div class="form-group">
                          <!-- <p-autoComplete [(ngModel)]="locationInput"
                                          id="locationSelectInput"
                                          [suggestions]="location"
                                          (completeMethod)="filterLocations($event)"
                                          field="name"
                                          dataKey="id"
                                          placeholder="Enter Location"
                                          [minLength]="1"
                                          name="LocationSelectInput"
                                          styleClass="width-percent-100"
                                          [style]="{'width':'100%'}"
                                          [inputStyle]="{'width':'95%','height':'33px'}"
                                          [dropdown]="true">
                                          >
                          </p-autoComplete> -->
                          <!-- <validation-messages [formCtrl]="TimeZoneSelectInput"></validation-messages> -->

                          <select class="form-control kt-select2" data-placeholder="Select Location" id="locationSelectInput" name="locationSelectInput" tabindex="-1" aria-hidden="true" required="">
                              <option></option>
                              <option  *ngFor="let location of locations" value="{{location.id}}">{{location.name}}</option>
                          </select>
                         
                      </div>
                      <div class="form-group">
                          <!-- <p-autoComplete [(ngModel)]="vehicleInput"
                                          id="VehicleSelectInput"
                                          [suggestions]="vehicle"
                                          (completeMethod)="filterVehicles($event)"
                                          field="name"
                                          dataKey="id"
                                          placeholder="Enter Vehicle"
                                          [minLength]="1"
                                          name="VehicleSelectInput"
                                          styleClass="width-percent-100"
                                          [style]="{'width':'100%'}"
                                          [inputStyle]="{'width':'95%','height':'33px'}"
                                          [dropdown]="true">
                                          >
                          </p-autoComplete> -->
                          <!-- <validation-messages [formCtrl]="TimeZoneSelectInput"></validation-messages> -->
                          <select class="form-control kt-select2" data-placeholder="Select Vehicle" id="vehicleSelectInput" name="vehicleSelectInput" tabindex="-1" aria-hidden="true" required="">
                              <option></option>
                              <option  *ngFor="let vehicle of vehicles" value="{{vehicle.id}}">{{vehicle.name}}</option>
                          </select>
                          
                      </div>
                    
                    
                  

                </div>
                <div class="modal-footer">
                    <button type="button" [disabled]="saving" class="btn btn-secondary btn-elevate btn-pill" (click)="close()">{{"Cancel" | localize}}</button>
                    <button type="submit" id="submit" [buttonBusy]="saving" [busyText]="l('SavingWithThreeDot')" class="btn btn-primary btn-elevate btn-pill" disabled='disabled'><i class="fa fa-save"></i> <span>{{"Save" | localize}}</span></button>
                </div>
            </form>
        </div>
    </div>
</div>
