<div [@routerTransition]>
 <div class="primeng-datatable-container" >
                            <p-table #dataTable
                                    (onLazyLoad)="populateTable($event)"
                                    [value]="primengTableHelper.records"
                                    rows="{{primengTableHelper.defaultRecordsCountPerPage}}"
                                    [paginator]="false"
                                    [lazy]="true"
                                    [responsive]="primengTableHelper.isResponsive">
                                <ng-template pTemplate="header" >
                                    <tr>
                                        <th class="checkboxHolder">&nbsp;</th>
                                        <th pSortableColumn="Id">
                                            {{'ID' | localize}}
                                            <p-sortIcon field="Id"></p-sortIcon>
                                        </th>
                                        <th pSortableColumn="Location">
                                            {{'Vehicle' | localize}}
                                            <p-sortIcon field="location"></p-sortIcon>
                                        </th>
                                        <th pSortableColumn="Location">
                                            {{'Driver' | localize}}
                                            <p-sortIcon field="location"></p-sortIcon>
                                        </th>
                                        <th pSortableColumn="LoadDate">
                                            {{'Load Date' | localize}}
                                            <p-sortIcon field="loadDate"></p-sortIcon>
                                        </th>
                                        
                                        <th pSortableColumn="Locked">
                                            {{'Locked' | localize}}
                                            <p-sortIcon field="locked"></p-sortIcon>
                                        </th>

                                        <th pSortableColumn="Completed ">
                                            {{'Completed' | localize}}
                                            <p-sortIcon field="locked"></p-sortIcon>
                                        </th>

                                        <th pSortableColumn="Locked">
                                            {{'Device' | localize}}
                                            <p-sortIcon field="locked"></p-sortIcon>
                                        </th>

                                        <th pSortableColumn="Locked">
                                            {{'Status' | localize}}
                                            <p-sortIcon field="locked"></p-sortIcon>
                                        </th>

                                        <th pSortableColumn="Locked">
                                            {{'Pckgs' | localize}}
                                            <p-sortIcon field="locked"></p-sortIcon>
                                        </th>

                                        <th pSortableColumn="Locked">
                                            {{'ETA' | localize}}
                                            <p-sortIcon field="locked"></p-sortIcon>
                                        </th>

                                        <th pSortableColumn="Locked">
                                            {{'Map' | localize}}
                                            <p-sortIcon field="locked"></p-sortIcon>
                                        </th>
                                    </tr>
                                </ng-template>
                                <ng-template pTemplate="body" let-record="$implicit">
                                    <tr class="tr-controller-routes">
                                        <td>
                                            <span (click)="chkBox.tickBox()">        
                                                <checkbox #chkBox [value]="record.routeId" [selected]="1" [id]="record.routeId"  [idname]="record.routeId"></checkbox>
                                            </span>
                                        </td>
                                        <td>
                                            <span class="ui-column-title">{{'ID' | localize}}</span>
                                            <a class="link-route" target="_blank" href="">{{ record.routeId }}</a>
                                        </td>
                                        <td>
                                            <span class="ui-column-title">{{'Vehicle' | localize}}</span>
                                            {{ record.vehicleName}}
                                        </td>
                                        <td>
                                            <span class="ui-column-title">{{'Driver' | localize}}</span>
                                            GHL Kawhi Leonard
                                        </td>
                                        <td>
                                            <span class="ui-column-title">{{'Load Date' | localize}}</span>
                                            {{ record.loadDate | date:'MM/dd/yyyy'  }}
                                        </td>
                                        
                                        <td class="tdLock">
                                            <span class="ui-column-title">{{'Locked' | localize}}</span>
                                            <span *ngIf="record.locked == 1"><i class="fa fa-lock"></i></span>
                                            <span *ngIf="record.locked == 0"><i class="fa fa-lock-open"></i></span>
                                        </td>

                                        <td>
                                            <span class="ui-column-title">{{'Completed' | localize}}</span>
                                            {{ record.completion | date: 'MM/dd/yyyy hh:mm aa' }}
                                        </td>

                                        <td>
                                            <devices [version]="record.deviceVersion" [device_type]="device_type" [current_version]="1"></devices>  
                                        </td>

                                        <td>
                                            <status status_code="WAITING_PICKUP"></status>
                                        </td>

                                        <td>
                                            0
                                        </td>

                                        <td>
                                            06:30 PM
                                        </td>

                                        <td>
                                            <i class="map-pin fas fa-map-pin"></i>
                                        </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)="populateTable($event)"
                                            [totalRecords]="primengTableHelper.totalRecordsCount"
                                            [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                                </p-paginator>
                                <span class="total-records-count">
                                    {{'TotalRecordsCount' | localize:primengTableHelper.totalRecordsCount}}
                                </span>
                            </div> 
                        </div>
<div [@routerTransition]>