<div class="routes-filter-container">
    <div class="search-button-container" style="width: 100%;">
        <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="vehicleNameFilter" [(ngModel)] ="vehicleName" (keyup.enter)="getVehicleList($event)"> 
            <div class="input-group-append">
                <button class="btn btn-secondary" type="button" (click)="getVehicleList($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)="getVehicleList($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="VehicleName">
                        {{'VehicleName' | localize}}
                        <p-sortIcon field="vehicleName"></p-sortIcon>
                    </th>
                    <th pSortableColumn="ActiveDriver">
                        {{'ActiveDriver' | localize}}
                        <p-sortIcon field="activeDriver"></p-sortIcon>
                    </th>
                    <th pSortableColumn="ActiveRoute">
                        {{'ActiveRoute' | localize}}
                        <p-sortIcon field="activeRoute"></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>
                        {{record.vehicleId}}
                    </td>
                    <td>
                        <span class="ui-column-title">{{'VehicleName' | localize}}</span>
                        
                        <a target="_blank" href="app/sprintship/controller-vehicles/{{record.vehicleId}}/{{filters.locationFilter}}">{{record.name}}</a>
                        
                    </td>
                    <td>
                        <span class="ui-column-title">{{'ActiveDriver' | localize}}</span>
                        {{record.fullName}}
                    </td>
                    <td>
                        <span class="ui-column-title">{{'ActiveLoadList' | localize}}</span>
                        {{record.activeRouteId}}
                    </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)="getVehicleList($event)"
                        #paginator
                        [totalRecords]="primengTableHelper.totalRecordsCount"
                        [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
            </p-paginator>
            <span class="total-records-count">
                {{'TotalRecordsCount' | localize:primengTableHelper.totalRecordsCount}}
            </span>
        </div> 
    </div>
<div [@routerTransition]>