<div [@routerTransition] id="tblRoutes">
 <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="routeId">
                                            {{'ID' | localize}}
                                            <p-sortIcon field="routeId"></p-sortIcon>
                                        </th>
                                        <th pSortableColumn="Vehicle">
                                            {{'Vehicle' | localize}}
                                            <p-sortIcon field="location"></p-sortIcon>
                                        </th>
                                        <th pSortableColumn="fullName">
                                            {{'Driver' | localize}}
                                            <p-sortIcon field="fullName"></p-sortIcon>
                                        </th>
                                        <th pSortableColumn="LoadDate">
                                            {{'Load Date' | localize}}
                                            <p-sortIcon field="loadDate"></p-sortIcon>
                                        </th>
                                        
                                        <th>
                                            {{'Locked' | localize}}
                                        </th>

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

                                        <th>
                                            {{'Device' | localize}}
                                        </th>

                                        <th>
                                            {{'Driver Status' | localize}}
                                        </th>
                                        <th>
                                            {{'Package Status' | localize}}
                                        </th>

                                        <th>
                                            {{'Packages' | localize}}
                                        </th>

                                        <th>
                                            {{'ETA' | localize}}
                                        </th>

                                        <th>
                                            {{'Map' | localize}}
                                        </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 target="_blank" href="app/sprintship/controller-routes-details/{{record.routeId}}">{{ record.routeId }}</a>
                                        </td>
                                        <td>
                                            <span class="ui-column-title">{{'Vehicle' | localize}}</span>
                                            {{ record.vehicleName}}
                                        </td>
                                        <td>
                                            <span class="ui-column-title">{{'Fullname' | localize}}</span>
                                            {{ record.fullName }}
                                        </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: 'hh:mm aa' }}
                                        </td>

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

                                        <td>

                                           <status id="status{{record.routeId}}" status_code="{{record.driverStatus}}" #driverStatusCode [attr]="attr" [idholder]="record.routeId" (onShown)="onShown()"></status>
                                        </td>
                                        <td id="statusRow{{record.routeId}}">

                                            <status id="status{{record.routeId}}" status_code="{{record.Status}}" #statusCode [attr]="attr" [idholder]="record.routeId" (onShown)="onShown()"></status>
                                        </td>

                                        <td>
                                            <!-- <span id="route{{record.routeId}}">0</span> -->
                                            {{record.TotalPackages}}
                                        </td>

                                        <td>
                                            {{record.ETA}}
                                        </td>

                                        <td>
                                            <a href="javascript:;"><i class="map-pin fas fa-map-marked-alt" (click)="openMap(record.routeId)"></i></a>
                                        </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]>