<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" #incidentForm="ngForm" novalidate (ngSubmit)="save()">
        <div class="modal-header">
            <h4 class="modal-title">
            <span>{{"Edit Incident" | 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>{{"Content" | localize}}</label>
            <input #contentInput class="form-control" type="text" name="content" [(ngModel)]="incident.content" required maxlength="32">            
          </div>
          <div class="form-group">
                          <div class="row">
                                        <div class="col-sm-6">
                                          
                                          <label for="IncidentDate" style="padding-bottom: 5px;">{{"Incident Date" | localize}} *</label>
                                          <input name="IncidentDate"
                                          type="text"
                                          class="form-control"
                                          id="IncidentDate"
                                          bsDatepicker
                                          [(ngModel)]="incidentDate"
                                          readonly="readonly"
                                          placeholder="Select Date" 
                                          #IncidentDate="ngModel"
                                          required/>
                                          <validation-messages [formCtrl]="IncidentDate"></validation-messages>

                                          
                                        </div>
                                        
                                        <div class="col-sm-6">
                                       
                                            <timepicker 
                                            name="incidentTime"
                                            [(ngModel)]="incidentTime" 
                                            [showSpinners]="true" 
                                            #incidentTimeCtrl="ngModel"></timepicker>
                                        </div>
                            </div>
              
          </div>
          <div class="row">
              <div class="col-sm-6">
                  <label for="Latitude">{{"Latitude" | localize}} *</label>
                  <input id="latitudeInput" [(ngModel)]="geocode.latitude" type="number" name="Latitude" class="form-control">
                  
              </div>
              <div class="col-sm-6">
                  <label for="Longitude">{{"Longitude" | localize}} *</label>
                  <input id="longitudeInput" [(ngModel)]="geocode.longitude" type="number" name="Longitude" class="form-control" >
                 
              </div>
          </div>

          <div class="form-group" style="padding-top: 25px;">
              <div></div>
              <label for="FileUploadFileInput">Add Image</label>
              <p-fileUpload multiple="multiple"
                            id="FileUploadFileInput"
                            name="FileUploadFileInput[]"
                            [url]="uploadUrl"
                            accept="image/*"
                            maxFileSize="1000000"
                            (onSelect) = "getFile($event)"
                            (onRemove) = "remove($event)"
                            [showUploadButton]="false"
                            [showCancelButton]="false"
                            (onBeforeSend)="onBeforeSend($event)">

                  <ng-template pTemplate="content">
                      <ul *ngIf="uploadedFiles.length">
                          <li *ngFor="let file of uploadedFiles">{{file.name}} - {{file.size}} bytes</li>
                      </ul>
                  </ng-template>
              </p-fileUpload>
          </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]="!incidentForm.form.valid" [buttonBusy]="saving" [busyText]="l('SavingWithThreeDot' | localize)"><i class="fa fa-save"></i> <span>{{"Save" | localize}}</span></button>
        </div>
      </form>
    </div>
  </div>
</div>