<div [@routerTransition]>
 
   <div class="kt-content  kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor">
   
      <div class="kt-subheader kt-grid__item">
         <div [class]="containerClass">
            <div class="kt-subheader__main">
               <h3 class="kt-subheader__title">
                  <span>{{"DriverIncidents" | localize}}</span>
               </h3>
               <span class="kt-subheader__separator kt-subheader__separator--v"></span>
               <span class="kt-subheader__desc">
                  {{"ManageDriverIncidents" | localize}}
               </span>
            </div>
            <div class="kt-subheader__toolbar">
               <div class="kt-subheader__wrapper">
                  <button *ngIf="'Pages.Administration.Employees.DriverIncidents.Create' | permission" class="btn btn-primary btn-elevate btn-pill" (click)="create()"><i class="fa fa-plus"></i>{{"Create Incident" | localize}}</button>
               </div>
            </div>
         </div>
      </div>

      <div [class]="containerClass + ' kt-grid__item kt-grid__item--fluid'">
         <div class="kt-portlet kt-portlet--mobile">
            <div class="kt-portlet__body">
               <div class="row align-items-center">
                  <div class="col-md-12">
                     <form class="kt-form" autocomplete="off" (ngSubmit) = "getIncidents()">
                        <div class="row align-items-center mb-4">
                              <div class="col-md-12">                                         
                                 <div class="kt-searchbar">
                                    <div class="kt-input-icon kt-input-icon--right">                                                   
                                          <input type="text" class="form-control" placeholder="Search" id="generalSearch" name="name" [(ngModel)]="filters.userName" name="name" autoFocus>                                                   
                                          <span class="kt-input-icon__icon kt-input-icon__icon--right">
                                             <span class="" id="basic-addon1"><i class="flaticon-search"></i></span>   
                                          </span>
                                    </div>  
                                 </div>
                              </div>
                        </div>           
                     </form>
                  </div>
               </div>
               <div class="col-md-12">
                  <div class="primeng-datatable-container"
                     >

                     <p-table #dataTable
                        (onLazyLoad)="getIncidents($event)"
                        [value]="primengTableHelper.records"
                        rows="{{primengTableHelper.defaultRecordsCountPerPage}}"
                        [paginator]="false"
                        [lazy]="true"
                        [scrollable]="true"
                        ScrollWidth="100%"
                        [responsive]="primengTableHelper.isResponsive"
                        [resizableColumns]="primengTableHelper.resizableColumns">
                     
                        <ng-template pTemplate="header">
                           <tr>
                              <th style="width: 150px" [hidden]="!isGrantedAny('Pages.Administration.Employees.DriverIncidents.Edit', 'Pages.Administration.Employees.DriverIncidents.Delete')">{{'Actions' | localize}}</th>
                              
                              <th style="width: 200px" pSortableColumn="user.name">
                                 {{'Driver' | localize}}
                                 <p-sortIcon field="user.name"></p-sortIcon>
                              </th>
                              
                              <th style="width: 200px" pSortableColumn="incident.content">
                                 {{'Incident' | localize}}
                                 <p-sortIcon field="incident.content"></p-sortIcon>
                              </th>
                              
                              <th style="width: 200px" pSortableColumn="incident.incidentDate">
                                 {{'Date' | localize}}
                                 <p-sortIcon field="incident.incidentDate"></p-sortIcon>
                              </th>
                              <th style="width: 200px" pSortableColumn="incident.geocode.latitude">
                                 {{'Latitude' | localize}}
                                 <p-sortIcon field="incident.geocode.latitude"></p-sortIcon>
                              </th>
                              <th style="width: 200px" pSortableColumn="incident.geocode.longitude">
                                 {{'Longitude' | localize}}
                                 <p-sortIcon field="incident.geocode.longitude"></p-sortIcon>
                              </th>
                           </tr>
                        </ng-template>

                        <ng-template pTemplate="body" let-record="$implicit">
                           <tr>
                              <td style="width: 150px" [hidden]="!isGrantedAny('Pages.Administration.Employees.DriverIncidents')">
                                 <div class="btn-group dropdown" dropdown container="body">
                                    <button dropdownToggle class="dropdown-toggle btn btn-sm btn-primary btn-elevate btn-pill">
                                       <i class="fa fa-cog"></i>
                                       <span class="caret"></span> {{"Actions" | localize}}
                                    </button>

                                    <ul class="dropdown-menu" *dropdownMenu>
                                       <li>
                                          <a href="javascript:;" *ngIf="'Pages.Administration.Employees.DriverIncidents.Edit' | permission"
                                                (click)="update(record.id)">{{'Edit' | localize}}</a>
                                       </li>
                                       
                                       <li>
                                          <a href="javascript:;" *ngIf="'Pages.Administration.Employees.DriverIncidents.Delete' | permission"
                                                (click)="delete(record)">{{'Delete' | localize}}</a>
                                       </li>
                                    </ul>
                                 </div>
                              </td>
                              <td style="width: 200px">
                                 <span class="ui-column-title"> {{'Driver' | localize}}</span>
                                 {{record.user.name | titlecase}} {{record.user.surname | titlecase}}
                              </td>
                              <td style="width: 200px">
                                 <span class="ui-column-title"> {{'Incident' | localize}}</span>
                                 {{record.incident.content}}
                              </td>
                              <td style="width: 200px">
                                 {{record.incident.incidentDate | date:'MM/dd/yyyy HH:mm'}}
                              </td>
                              <td style="width: 200px">
                                 {{record.incident.geocode == undefined ? 'n/a' : record.incident.geocode.latitude}}
                                 
                              </td>
                              <td style="width: 200px">
                                 {{record.incident.geocode == undefined ? 'n/a' : record.incident.geocode.longitude}}
                                 
                              </td>
                              <!-- <td style="width: 200px">
                                 {{record.incident.geocode}}
                              </td> -->
                           </tr>
                        </ng-template>
                     </p-table>

                     <div class="primeng-no-data" *ngIf="primengTableHelper.totalRecordsCount == 0">
                        {{'NoData' | localize}}
                     </div>

                     <div class="primeng-paging-container">
                        <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage"
                           #paginator
                           (onPageChange)="getIncidents($event)"
                           [totalRecords]="primengTableHelper.totalRecordsCount"
                           [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">

                        </p-paginator>
                        <span class="total-records-count">
                              {{'TotalRecordsCount' | localize:primengTableHelper.totalRecordsCount}}
                        </span>
                     </div>
                     
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>   

   <createOrEditDriverIncidentModal #createOrEditDriverIncidentModal (modalSave)="getIncidents()"></createOrEditDriverIncidentModal>
</div>