<div [@routerTransition]  (onShown)="onShown()" >
	<div id="controllerHolder">
		<!-- <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 row" id="kt-subheader-controller">
				<div  [class]="containerClass">
					<div class="col-md-11 col-sm-12">
						<div class="kt-subheader__main">
							<h2 class="kt-subheader__title"><span class="badge badge-info margin-left-5"> Route: {{_isLab ? routeCode : routeId | localize}}</span> <span class="badge badge-info margin-left-5">{{vehicleName}}</span><span class="badge badge-info margin-left-5">{{locationName}}</span><span class="badge badge-info margin-left-5">{{loadDate | date:'fullDate'}}</span> </h2>
						</div>
					</div>

					<div class="col-md-1 col-sm-12 padding-right-0">
						<div class="form-group margin-bottom-1re" (click)="getDetails()">
							<div dropdown class="kt-header__topbar-item dropdown dropdown-language " aria-haspopup="true" align="right">
								<div dropdownToggle class="kt-header__topbar-wrapper" data-toggle="dropdown" data-offset="30px,0px" aria-expanded="true">
									<button class="btn btn-secondary btn-pill" type="button" id="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
										Actions <span class="padding-left-20 padding-top-1"><i class="fa fa-chevron-down"></i></span>
									</button>
								</div>
								<div *dropdownMenu class="dropdown-menu dropdown-menu-fit dropdown-menu-right dropdown-menu-anim dropdown-menu-top-unround dropdown-menu-lg">
									<ul class="kt-nav width-100">
										<li class="kt-nav__item" (click)="routeDetailModal.show(routeId)">
											<span class="kt-nav__link">
												<span class="kt-nav__link-text">Show Details</span>
											</span>
										</li>
										<li class="kt-nav__item">
											<span class="kt-nav__link">
												<span class="kt-nav__link-text">Email Delivery Exception</span>
											</span>
										</li>
										<li class="kt-nav__item" (click)="setDeparture()">
											<span class="kt-nav__link">
												<span class="kt-nav__link-text">{{route.departure  ? 'Remove' : 'Set'}} Departure Time</span>
											</span>
										</li>
										<li class="kt-nav__item" (click)="setCompletion()">
											<span class="kt-nav__link">
												<span class="kt-nav__link-text">Mark as {{route.completion  ? 'Uncomplete' : 'Completed'}}</span>
											</span>
										</li>
										<li class="kt-nav__item">
											<span class="kt-nav__link">
												<span class="kt-nav__link-text">Print Load List</span>
											</span>
										</li>
										<li class="kt-nav__item" *ngIf="!_isLab">
											<span class="kt-nav__link">
												<span class="kt-nav__link-text">Move Pending Packages</span>
											</span>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div> -->

		<div class="kt-subheader kt-grid__item">
			<div class="kt-container kt-container--fluid">
				<div class="kt-subheader__main">
					<h3 class="kt-subheader__title">
						<span class="ng-tns-c21-1">Route:</span>
					</h3>
					<span class="kt-subheader__separator kt-subheader__separator--v"></span>
					<span class="kt-subheader__desc"> {{_isLab ? routeCode : routeId | localize}} </span>
					<span class="kt-subheader__desc"> {{vehicleName}} </span>
					<span class="kt-subheader__desc"> {{locationName}} </span>
					<span class="kt-subheader__desc"> {{loadDate | date:'fullDate'}} </span>
					
				</div>
				<div class="kt-subheader__toolbar">
					<div class="kt-subheader__wrapper">

						<div class="form-group margin-bottom-1re" (click)="getDetails()">
								<div dropdown class="kt-header__topbar-item dropdown dropdown-language " aria-haspopup="true" align="right">
									<div dropdownToggle class="kt-header__topbar-wrapper" data-toggle="dropdown" data-offset="30px,0px" aria-expanded="true">
										<button class="btn btn-secondary btn-pill" type="button" id="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
											Actions <span class="padding-left-20 padding-top-1"><i class="fa fa-chevron-down"></i></span>
										</button>
									</div>
									<div *dropdownMenu class="dropdown-menu dropdown-menu-fit dropdown-menu-right dropdown-menu-anim dropdown-menu-top-unround dropdown-menu-lg">
										<ul class="kt-nav width-100">
											<li class="kt-nav__item" (click)="routeDetailModal.show(routeId)">
												<span class="kt-nav__link">
													<span class="kt-nav__link-text">Show Details</span>
												</span>
											</li>
											<li class="kt-nav__item">
												<span class="kt-nav__link">
													<span class="kt-nav__link-text">Email Delivery Exception</span>
												</span>
											</li>
											<li class="kt-nav__item" (click)="setDeparture()">
												<span class="kt-nav__link">
													<span class="kt-nav__link-text">{{route.departure  ? 'Remove' : 'Set'}} Departure Time</span>
												</span>
											</li>
											<li class="kt-nav__item" (click)="setCompletion()">
												<span class="kt-nav__link">
													<span class="kt-nav__link-text">Mark as {{route.completion  ? 'Uncomplete' : 'Completed'}}</span>
												</span>
											</li>
											<li class="kt-nav__item">
												<span class="kt-nav__link">
													<span class="kt-nav__link-text">Print Load List</span>
												</span>
											</li>
											<li class="kt-nav__item" *ngIf="!_isLab">
												<span class="kt-nav__link">
													<span class="kt-nav__link-text">Move Pending Packages</span>
												</span>
											</li>
										</ul>
									</div>
								</div>
							</div>
					</div>
				</div>
			</div>
		</div>

		<!-- start table component => antech-route-detail | hf-route-detail -->
		<div *ngIf="_isLab; else hfRouteDetails">
			<lab-route-detail></lab-route-detail>
		</div>
		<ng-template #hfRouteDetails>
			<div>
				<hf-route-detail></hf-route-detail>
			</div>
		</ng-template>
		<!-- end table component => antech-route-detail | hf-route-detail -->
</div>
</div>

<routeDetailModal #routeDetailModal></routeDetailModal>