<div class="bootstrap-wrapper gamification">
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-12">
				<h3>{{'Select achievements to search for' | translate}}</h3>
				<div id="suggest_container" style="margin-bottom:20px;">
					<div id="suggest_container">
						<form action="" class="search-form bg-primary" id="search-form">
							<div class="input-group input-group-lg">
								<span class="input-group-addon no-background"><span class="glyphicon glyphicon-search"></span></span>
								<input placeholder="{{'Filter' | translate}}" ng-model="searchTerm" ng-blur="blur();" type="text" style="max-width:100%" name="s" class="form-control">
							</div>
						</form>
						<div id="autosuggest" ng-show="showSuggestionList">
							<div class="wizdom365-qSuggest-listItem" ng-show="searching">
								{{'Searching' | translate }}
							</div>
							<div ng-show="searching != true && searchResultsBadge.length == 0 && searchResultsSkill.length == 0 && searchResultsCertificate.length == 0" class="wizdom365-qSuggest-listItem">
								{{'No matching results'| translate }}
							</div>
							<div ng-show="searching != true && searchResultsBadge.length > 0">
								<div class="wizdom365-qSuggest-listItem">
									<strong>{{'Badges' | translate}}</strong>
								</div>
								<div ng-click="addItem(item, 'badge')" class="wizdom365-qSuggest-listItem showHand" style="margin-left:10px;" ng-repeat="item in searchResultsBadge">
									{{item.title}}
								</div>
							</div>
							<div ng-show="searching != true && searchResultsSkill.length > 0">
								<div class="wizdom365-qSuggest-listItem">
									<strong>{{'Skills' | translate}}</strong>
								</div>
								<div ng-click="addItem(item, 'skill')" class="wizdom365-qSuggest-listItem showHand" style="margin-left:10px;" ng-repeat="item in searchResultsSkill">
									{{item.title}}
								</div>
							</div>
							<div ng-show="searching != true && searchResultsCertificate.length > 0">
								<div class="wizdom365-qSuggest-listItem">
									<strong>{{'Certificates' | translate}}</strong>
								</div>
								<div ng-click="addItem(item, 'certificate')" class="wizdom365-qSuggest-listItem showHand" style="margin-left:10px;" ng-repeat="item in searchResultsCertificate">
									{{item.title}}
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="alert alert-success" ng-show="choosenBadges.length > 0 || choosenSkills.length > 0 || choosenCertificates.length > 0">
					<!--<div ng-show="choosenBadges.length == 0 && choosenSkills.length == 0 && choosenCertificates.length == 0">
						{{'Not filtering by any achievement' | translate }}
					</div>-->
					<div ng-show="choosenBadges.length>0">
						{{'Filtering by badges' | translate }}:
						<span ng-repeat="item in choosenBadges track by $index">
							<span>{{item.title}} <a href="" ng-click="removeItem($index,'badge')">x</a></span>
							<span ng-if="!$last">, </span>
						</span>
					</div>
					<div ng-show="choosenSkills.length>0">
						{{'Filtering by skills' | translate}}:
						<span ng-repeat="item in choosenSkills track by $index">
							<span>{{item.title}} <a href="" ng-click="removeItem($index,'skill')">x</a></span>
							<span ng-if="!$last">, </span>
						</span>
					</div>
					<div ng-show="choosenCertificates.length>0">
						{{'Filtering by certificates' | translate}}:
						<span ng-repeat="item in choosenCertificates track by $index">
							<span>{{item.title}} <a href="" ng-click="removeItem($index,'certificate')">x</a></span>
							<span ng-if="!$last">, </span>
						</span>
					</div>
				</div>
				<div class="btn-toolbar">
					<button style="width:100%" type="button" class="btn btn-primary" ng-click="search()"><span class="glyphicon glyphicon-search"></span> Search persons</button>
				</div>
				<di ng-show="searched" v>
					<h4>{{'Search results' |translate}}</h4>
					<div>
						<div>
							<div ng-show="!searchresults.length">
								{{'No results where found. Please refine' | translate }}
							</div>
							<table class="table table-hover" ng-show="searchresults.length">
								<thead>
									<tr>
										<th class="text-center">#</th>
										<th>{{'Name' | translate }}</th>
										<th>{{'Email' | translate }}</th>
									</tr>
								</thead>
								<tbody>
									<tr ng-repeat="item in searchresults" style="cursor:pointer" ng-click="showDialog(item.loginName,item.displayName)">
										<td class="text-center">{{$index+1}}</td>
										<td>{{item.displayName}}</td>
										<td>{{item.loginName}}</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
			</div>
		</div>
	</div>
</div>
</div>
