<div class="routes-filter-container">
    <div class="search-button-container" style="width: 100% !important;">
        <div class="input-group">
            <div class="input-group-prepend">
                <button class="btn btn-secondary btn-controller-search-icon" type="button"><i class="fa fa-search"></i></button>
            </div>
            <input type="text" class="form-control" placeholder="Search" id="driverNameFilter" [(ngModel)] = "driverName" (keyup.enter)="getDriverList($event)">
            <div class="input-group-append">
                <button class="btn btn-secondary" type="button" (click)="getDriverList($event)"><i class="fa fa-filter"></i> Filter</button>
            </div>
        </div>
    </div>
    <!-- <div class="search-button-filter">
        <button type="reset" class="btn btn-secondary btnToggleMore btnControllerMenu"><i class="fa fa-ellipsis-v"></i></button>
    </div> -->
</div>
<div [@routerTransition]>
    <div class="primeng-datatable-container" >
        <p-table #dataTable
                (onLazyLoad)="getDriverList($event)"
                [value]="primengTableHelper.records"
                rows="{{primengTableHelper.defaultRecordsCountPerPage}}"
                [paginator]="false"
                [lazy]="true"
                [responsive]="primengTableHelper.isResponsive">
            <ng-template pTemplate="header" >
                <tr>
                    <th pSortableColumn="Id">
                        {{'ID' | localize}}
                        <p-sortIcon field="id"></p-sortIcon>
                    </th>
                    <th pSortableColumn="Name">
                        {{'Name' | localize}}
                        <p-sortIcon field="name"></p-sortIcon>
                    </th>
                    <th pSortableColumn="Started">
                        {{'Started' | localize}}
                        <p-sortIcon field="started"></p-sortIcon>
                    </th>
                    <th pSortableColumn="Loads">
                        {{'Loads' | localize}}
                        <p-sortIcon field="loads"></p-sortIcon>
                    </th>
                    <th pSortableColumn="AppVersion">
                        {{'AppVersion' | localize}}
                        <p-sortIcon field="appVersion"></p-sortIcon>
                    </th>
                </tr>   
            </ng-template>
            <ng-template pTemplate="body" let-record="$implicit">
                <tr class="tr-controller-routes">
                    <td>
                        <span class="ui-column-title">{{'ID' | localize}}</span>
                <!-- <a class="link-route" target="_blank" href="">{{ record.vehicleId }}</a> -->
                        {{record.userId}}
                    </td>
                    <td>
                        <span class="ui-column-title">{{'Name' | localize}}</span>
                       <a target="_blank"  href="app/sprintship/controller-drivers/{{record.userId}}/{{filters.locationFilter}}">{{record.fullName}}</a> 
                    </td>
                    <td>
                        <span class="ui-column-title">{{'Started' | localize}}</span>
                        {{record.dateStarted}}
                    </td>
                    <td>
                        <span class="" id="driver{{record.userId}}">0</span>
                    </td>
                    <!-- <td>
                        <span class="ui-column-title">{{'AppVersion' | localize}}</span>
                        {{ record.appVersion}}
                    </td> -->
                    <td>
                        <devices [version]="record.appVersion" [device_type]="record.deviceOs" [current_version]="1"></devices>    
                    </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"
                        (onPageChange)="getDriverList($event)"
                        #paginator
                        [totalRecords]="primengTableHelper.totalRecordsCount"
                        [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
            </p-paginator>
            <span class="total-records-count">
                {{'TotalRecordsCount' | localize:primengTableHelper.totalRecordsCount}}
            </span>
        </div> 
    </div>
<div [@routerTransition]>