<header
	id="topnav"
	class="navbar ng-hide {{getLayoutOption('topNavThemeClass')}}"
	ng-class="{'navbar-fixed-top': getLayoutOption('fixedHeader'), 'navbar-static-top': !getLayoutOption('fixedHeader')}"
	ng-controller="MainController"
	role="banner"
	ng-show="!layoutLoading"
	ng-cloak>
	<!-- <a id="leftmenu-trigger" ng-click="toggleLeftBar()"></a> -->
	<!-- <a id="rightmenu-trigger" ng-click="toggleRightBar()"></a> -->
	<div class="logo-area">
		<span id="trigger-sidebar" class="toolbar-trigger toolbar-icon-bg" ng-click="toggleLeftBar()" ng-show="!getLayoutOption('layoutHorizontal')">
			<a data-toggle="tooltips" data-placement="right" title="Toggle Sidebar">
				<span class="icon-bg">
					<i class="ti ti-menu"></i>
				</span>
			</a>
		</span>
		
		<a href="#/" class="navbar-brand">Routely</a>

		<div class="toolbar-icon-bg hidden-xs" id="toolbar-search" ng-class="{
		  active: getLayoutOption('showSmallSearchBar')
		}">
			<form name="form_search" ng-controller="SearchIndexController as vm" ng-submit="vm._search()">
				<div class="input-group">
					<span class="input-group-btn"><button class="btn" type="submit"><i class="ti ti-search"></i></button></span>
					<!--<input type="text" class="form-control" ng-model="vm._word" placeholder="Search..." ng-required="true">-->
					<autocomplete ng-model="vm._word" data="vm._customers" on-type="vm._getCustomers" on-select="vm._selectCustomer" autocomplete-required="true" attr-input-class="form-control" attr-placeholder="Search..."></autocomplete>
					<span class="input-group-btn">
						<button class="btn" type="button" ng-click="toggleSearchBar($event)"><i class="ti ti-close"></i></button>
					</span>
				</div>
			</form>
	    </div>
	</div>

	<ul class="nav navbar-nav pull-right toolbar">
		<li class="toolbar-icon-bg visible-xs-block">
			<a href="" ng-click="toggleSearchBar($event)"><span class="icon-bg"><i class="ti ti-search"></i></span></a>
		</li>
		<li class="dropdown toolbar-icon-bg" dropdown ng-controller="FollowsUpMainController as followsUpMainCtrl" ng-if="isLoggedIn()">
			<a href="#/follows-up" title="Follows Up">
				<span class="icon-bg"><i class="ti ti-headphone-alt"></i></span>
				<span class="badge badge-primary" ng-if="followsUpMainCtrl._total > 0" ng-bind="followsUpMainCtrl._total"></span>
			</a>
		</li>
		<li class="dropdown toolbar-icon-bg" dropdown ng-controller="NotificationsMainController as notificationsMainCtrl" ng-if="isLoggedIn()">
			<a href dropdown-toggle class="dropdown-toggle" title="Notifications">
				<span class="icon-bg"><i class="ti ti-bell"></i></span>
				<span class="badge badge-primary" ng-if="notificationsMainCtrl._notifications.length > 0" ng-bind="notificationsMainCtrl._notifications.length"></span>
			</a>
			<div class="dropdown-menu animated notifications arrow">
				<div class="topnav-dropdown-header">
					<span>Notifications</span>
				</div>
				<ul class="media-list scrollthis" scrollable>
					<li ng-repeat="item in notificationsMainCtrl._notifications" class="media" style="padding: 15px;" ng-class="{'notification-success': item.action == 'created', 'notification-warning': item.action == 'updated', 'notification-danger': item.action == 'deleted'}">
						<div class="media-left">
							<span ng-click="notificationsMainCtrl._see(item.url)" style="cursor: pointer;" class="notification-icon" title="See"><i class="ti {{item.icon}}"></i></span>
						</div>
						<div class="media-body">
							<h4 class="notification-heading">{{item.content}}</h4>
							<span class="notification-time">{{item.time_ago}}</span>
						</div>
						<div class="media-right">
							<span ng-click="notificationsMainCtrl._read(item.id)" style="cursor: pointer;" title="Set notification as read"><i class="ti ti-close"></i></span>
						</div>
					</li>
				</ul>
				<div class="topnav-dropdown-footer">
					<a ng-click="notificationsMainCtrl._reload()">Refresh notifications</a>
				</div>
			</div>
		</li>
		<li class="toolbar-icon-bg dropdown" dropdown ng-show="isLoggedIn()" ng-controller="UserInfoController as userinfo">
			<a href class="dropdown-toggle username" dropdown-toggle title="Account">
				<img ng-if="userinfo._getUserImage()" ng-src="{{userinfo._getUserImage()}}" title="{{userinfo._getUserName()}}" />
				<span ng-if="!userinfo._getUserImage()" class="icon-bg"><i class="ti ti-user"></i></span>
			</a>
			<ul class="dropdown-menu animated userinfo arrow" ng-controller="AuthIndexController as vm">
				<li><a ng-click="vm._logout()"><i class="ti ti-shift-right"></i><span>Sign Out</span></a></li>
			</ul>
		</li>
	</ul>
</header>

<div menu-circle-routely-directive items="{{menuItems}}" ng-show="isLoggedIn()" style="position: relative;"></div>
