<div class="peopleInput input-group">
	<input type="text" class="form-control inputPeopleSearchbox365" ng-model="$parent.searchTerm" ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 500, 'blur': 0 } }" autocomplete="off" placeholder="{{'Find Colleague' | translate}}" />
	<span ng-click="$parent.searchTerm = ''" ng-show="$parent.searchTerm" class="glyphicon glyphicon-remove form-control-feedback"></span>
	<span class="input-group-addon">
		<span class="w365-searchLink">
			<img src="/_layouts/15/images/gears_anv4.gif" style="margin-top: 3px; margin-right: 1px;" ng-show="searching" />
			<i class="glyphicon glyphicon-search" ng-hide="searching"></i>
		</span>
	</span>
</div>
<div class="peopleInput input-group filter-group" ng-show="filters.length > 0">
	<a class="filter btn btn-default" ng-repeat="filter in filters" ng-click="removeFilter(filter)">
		{{::filter.label}}
		<span class="glyphicon glyphicon-remove"></span>
	</a>
</div>
<div class="advancedSearch">

	<span class="wt-linkText" title="{{'Advanced search' | translate}}" ng-click="showAdvancedSearch()">
		<span class="wt-linkText glyphicon glyphicon-filter wt-icon" style="" title="{{'Advanced search' | translate}}">
			<span class="hidden-xs">{{'Advanced search' | translate}}</span>
		</span>
	</span>
	<span ng-show="NoOfSelectedUsers > 0">
		<a role="button" style="padding-left:5px;" class="pull-right">
			<span ng-show="!selectedUsersIsCollapsed" title="{{'Hide selected users' | translate}}" ng-click="collapseSelectedUsers()" style="line-height:19px;" class="wt-linkText glyphicons glyphicons-circle-arrow-top"></span>
			<span ng-show="selectedUsersIsCollapsed" title="{{'Show selected users' | translate}}" ng-click="collapseSelectedUsers()" style="line-height:19px;" class="wt-linkText glyphicons glyphicons-circle-arrow-down"></span>
			<span title="{{'Remove all selected users' | translate}}" ng-click="removeSelectedUsers()" style="line-height:19px;" class="glyphicons glyphicons-remove-sign"></span>
		</a>
		<a role="button" style="padding-left:20px;" class="wt-linkText pull-right" ng-click="showSelectedUsers();" title="{{'Click to show selected users' | translate}}">
			{{'Selected users' | translate}}&nbsp;#{{NoOfSelectedUsers}}
		</a>
		<a role="button" class="wt-linkText pull-right" title="{{'Click to show selected users' | translate}}" ng-click="showLastResult();">
			{{'Search result' | translate}}
		</a>
	</span>

	<div collapse="isCollapsed">
		<div class="peopleInput">
			<input type="text" class="form-control" autocomplete="off" typeahead-on-select="filterSelected($item, $model, $label, 'Department'); selectedDepartment = '';" ng-model="selectedDepartment" typeahead="department for department in searchTerms(departments,$viewValue) | filter:$viewValue | limitTo:8" placeholder="{{'Filtering by department' | translate}}">
		</div>
		<div class="peopleInput">
			<input type="text" class="form-control" autocomplete="off" typeahead-on-select="filterSelected($item, $model, $label, 'BaseOfficeLocation'); selectedLocation = '';" ng-model="selectedLocation" typeahead="location for location in searchTerms(locations,$viewValue) | filter:$viewValue | limitTo:8" placeholder="{{'Filtering by location' | translate}}">
		</div>
		<div class="peopleInput">
			<input type="text" class="form-control" autocomplete="off" typeahead-on-select="filterSelected($item, $model, $label, 'JobTitle'); selectedJobTitles = '';" ng-model="selectedJobTitles" typeahead="jobTitle for jobTitle in searchTerms(jobTitles,$viewValue) | filter:$viewValue | limitTo:8" placeholder="{{'Filtering by job title' | translate}}">
		</div>
	</div>
</div>