<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="routeTemplateName" class="thRouteId">
                                            {{'Route ID' | localize}}
                                            <p-sortIcon field="routeTemplateName"></p-sortIcon>
                                        </th>
                                        <th class="thDelivery">
                                            {{'Delivery' | localize}}
                                        </th>
                                        <th class="thPickedUp">
                                            {{'Picked Up' | localize}}
                                        </th>
                                        <th class="thCancelled">
                                            {{'Cancelled' | localize}}
                                        </th>
                                        <th class="thWillCall">
                                            {{'Will Call' | localize}}
                                        </th>
                                        
                                        <th pSortableColumn="fullName" class="thDriver">
                                            {{'Driver' | localize}}
                                            <p-sortIcon field="fullName"></p-sortIcon>
                                        </th>
                                        <th class="thStatus">
                                           {{'Driver Status' | localize}}
                                        </th>
                                        <th class="thStatus">
                                            {{'Package Status' | localize}}
                                        </th>
                                        <th class="thStatus">
                                           {{'Will Call' | localize}}
                                        </th>
                                        <th class="thDevice">
                                            {{'Device' | localize}}
                                        </th>
                                       

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

                                        <th class="thLocked">
                                            {{'Locked' | localize}}
                                        </th>

                                        <th class="thETA">
                                            {{'ETA' | localize}}
                                        </th>

                                        <th class="thMap">
                                            {{'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">{{'routeTemplateName' | localize}}</span>
                                            <a target="_blank" href="app/sprintship/controller-routes-details/{{record.routeId}}">{{ record.routeTemplateName }}</a>
                                        </td>
                                        <td>
                                            {{record.TotalPackages}}
                                        </td>
                                        <td>
                                            <span *ngIf="(record.TotalPickedUp > 0); else noValue">
                                            {{record.TotalPickedUp}} / {{record.TotalPackages}}
                                            </span>
                                            <ng-template #noValue>
                                                <span>
                                                0 / {{record.TotalPackages}}
                                                </span>
                                            </ng-template>
                                        </td>
                                        <td>
                                            0
                                        </td>
                                        <td>
                                            0
                                        </td>
                                        
                                        <td>
                                            <span class="ui-column-title">{{'Fullname' | localize}}</span>
                                            {{ record.fullName }}
                                        </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>
                                            &nbsp;
                                        </td>
                                        <td>
                                            <devices [version]="record.deviceVersion" [device_type]="record.deviceType" [current_version]="1"></devices>    
                                        </td>
                                        

                                        <td>
                                            <span class="ui-column-title">{{'Completed' | localize}}</span>
                                            {{ record.completion | date: 'hh:mm aa' }}
                                        </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>
                                            {{record.ETA}}
                                        </td>

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