<div [@routerTransition]  (onShown)="onShown()" >
	 
	<div class="kt-content  kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor grid-route-header">
        <div class="kt-subheader kt-grid__item" id="kt-subheader-controller">
        		<div class="filter-location">
        			
        			<select class="form-control kt-select2 selLocation" data-placeholder="Select Location" id="locationSelectInput" tabindex="-1" aria-hidden="true" name="txtLocation" ngModel = {{filters.locationFilter}}>
		               
		               <option  *ngFor="let location of locations" value="{{location.id}}" [selected]="location.id === txtLocation">{{location.name}}</option>
		            </select>
        		</div>
        	
        	
        		<div class="filter-date-range">
        			
        			<div class="input-group" id="kt_daterangepicker_2">
						<input type="text" class="form-control" readonly="" name="dateRangeFilter" placeholder="Select date range" #dr  id=dateRangeFilter>
						<input type="hidden" class="form-control" readonly="" name="hiddenStartDate"  #dr ngModel = {{filters.startDate}} id="hiddenStartDate">
						<input type="hidden" class="form-control" readonly="" name="hiddenEndDate"  #dr ngModel = {{filters.endDate}} id="hiddenEndDate">
						<div class="input-group-append">
							<span class="input-group-text"><i class="la la-calendar-check-o"></i></span>
						</div>
					</div>
        		</div>
        		<div class="filter-interval">
        			
        			<div class="form-group input-group">
						<div class="input-group-prepend">
							<span class="input-group-text croutes-refreshprepend"><i class="fa fa-undo"></i></span>
						</div>
						<select class="form-control" id="refreshInterval">
							<option>Every 5 min</option>
							<option>Every 10 min</option>
							<option>Every 20 min</option>
							<option>Every 30 min</option>
						</select>
						<div class="input-group-append">
							<span class="input-group-text"><i class="fa fa-undo"></i></span>
						</div>
					</div>
        		</div>
        		<div class="col-md-3 btnContainerHeader filter-button">
        			
        			<button type="reset" class="btn btn-secondary btnToggleVisibility" (click)="hideKpi()"><i class="fa fa-eye-slash"></i>KPI</button>
        			<button class="btn btn-secondary btnToggleMore" (click)="filterRoutes();">APPLY</button>
        			<button class="btn btn-secondary btnToggleMore" (click)="getSelected();">GENERATE</button>
        	</div>
			
		</div>
	</div>
	<kpi-box *ngIf="hide"></kpi-box>
	<div>
		<div [class]="containerClass + ' kt-grid__item kt-grid__item--fluid'">
            <div class="kt-portlet kt-portlet--mobile">
                <div class="kt-portlet__body" >
                	<tabset #controllerTab >
                		<tab heading="Routes" class="routesTab" (selectTab)="loadRouteComponent()">
                			<div class="routes-filter-container">
                				<div class="search-button-container">
		                			<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">
										<div class="input-group-append">
											<button class="btn btn-secondary" type="button"><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>
							<table-routes-details [filters]="filters" #tblRoutesTable></table-routes-details>
						</tab>
						<tab heading="Map">
						</tab>
						<tab heading="Locator" (selectTab)="loadLocatorComponent()">
								<locator-tab *ngIf="statusLocatorComponent" [filters] = 'filters'></locator-tab>
						</tab>
						<tab heading="Orders">
						</tab>
						<tab heading="Packages">
						</tab> 
						<tab heading="Vehicles">
						</tab>
						<tab heading="Drivers" (selectTab)="loadDriverListComponent()">
							<driver-tab *ngIf="driverListComponent"></driver-tab>
						</tab>
					</tabset>
				</div>
			</div>
		</div>
	</div>
	
</div>