<div bsModal #createOrEditModal="bs-modal" (onShown)="onShown()" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="createOrEditModal" aria-hidden="true" [config]="{backdrop: 'static', keyboard: !saving}">
   <div class="modal-dialog modal-md">
      <div class="modal-content">
         <form *ngIf="active" #incidentForm="ngForm" novalidate (ngSubmit)="save()">
            <div class="modal-header">
               <h4 class="modal-title">
                  <span *ngIf="isCreate; else isUpdate">{{'CreateIncident' | localize}}</span>
                  <ng-template #isUpdate>
                     <span>{{'EditIncident' | localize}}</span>
                  </ng-template>
               </h4>
               <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">
           
                  <label for="driveSelectInput">{{"Driver" | localize}} *</label>
                 
                  <select class="form-control kt-select2" [(ngModel)]="userInput" data-placeholder="Select Driver" id="userInput" name="driver" tabindex="-1" aria-hidden="true">
                        {{id == '' ? '<option></option>' : ''}}
                        <option *ngFor="let user of users" value="{{user.id}}" [selected]="user.id ==  userInput">
                           {{user.name}}
                        </option>
                     </select>
   
               </div>

               <div class="form-group">
                  <label for="txtIncident">{{"Incident" | localize}} *</label>
                  <textarea placeholder="Enter content of incident"
                     class="form-control"
                     name="txtIncident"
                     [(ngModel)]="driverIncident.content"></textarea>
               </div>
               <div class="form-group">
                  <div class="row">
                     <div class="col-sm-6">
                        <label>{{"Incident Date" | localize}} *</label> 
                        <input type="text"
                        placeholder="Enter Incident Date"
                        class="form-control"
                        name="textIncidentDate"
                        [(ngModel)]="driverIncident.incidentDate"
                        bsDatepicker required>
                     </div>
                     <div class="col-sm-6">
                        <label>{{"Incident Time" | localize}} *</label> 
                        <!-- <timepicker 
                        name="incidentTime"
                        [(ngModel)]="driverIncident.incidentTime" 
                        [showSpinners]="true"></timepicker> -->
                        <kendo-timepicker 
                        name="incidentTime"
                        placeholder="Enter Incident Time"
                        [(ngModel)]="driverIncident.incidentTime" class="form-control"
                        ></kendo-timepicker>
                     </div>
                  </div>
               </div>
               <!-- <div class="form-group">
                  <label for="incidentTime">{{"IncidentTime" | localize}} *</label>
                  <div class="col-lg-10 col-md-9 col-sm-8">
                     <timepicker 
                     name="incidentTime"
                     required
                     [(ngModel)]="incidentTime" 
                     [showSpinners]="true" 
                     #incidentTime="ngModel"></timepicker>
                  </div>
                  <validation-messages [formCtrl]="incidentTime"></validation-messages>
               </div> -->
               <div class="row">
                  <div class="col-sm-6">
                      <label for="Latitude">{{"Latitude" | localize}} *</label>
                      <input id="latitude" #latitudeInput="ngModel" type="text" name="latitude" class="form-control" placeholder="Enter Latitude"  [(ngModel)]="driverIncident.latitude" required>
                      <validation-messages [formCtrl]="latitudeInput"></validation-messages>
                  </div>
                  <div class="col-sm-6">
                      <label for="Longitude">{{"Longitude" | localize}} *</label>
                      <input id="longitude" #longitudeInput="ngModel" type="text" name="longitude" placeholder="Enter Longitude" class="form-control"  [(ngModel)]="driverIncident.longitude" required>
                      <validation-messages [formCtrl]="longitudeInput"></validation-messages>
                  </div>
              </div>
            </div>

            <div class="modal-footer">
               <button [disabled]="saving" type="button" class="btn btn-default btn-elevate btn-pill" (click)="close()">{{"Cancel" | localize}}</button>
               <button type="button" class="btn btn-primary btn-elevate btn-pill" [disabled]="!incidentForm.form.valid" [buttonBusy]="saving" [busyText]="l('SavingWithThreeDot')" (click)="isCreate ? create(): update()">
                  <i class="fa fa-save"></i> <span>{{"Save" | localize}}</span>
               </button>
            </div>
         </form>
      </div>
   </div>
</div>