<div>
	<script type="text/ng-template" id="customTemplate.html">
		<div style="max-width:100%">
			<a href="" ng-click="showFaqModal(match.model)" class="suggestionlist-li-a">
				<div style="margin-bottom:0px;">
					<div style="width: 100%; overflow: hidden;">
						<div style="width: 32px; float: left;">
							<span ng-show="match.model.image">
								<img ng-src="{{match.model.image}}" style="height:30px;width:30px;border-radius: 10px;" />
							</span>
							<i class="glyphicon glyphicon-question-sign suggestionslist-li-icon" ng-hide="match.model.image"></i>
						</div>
						<div style="margin-left: 34px;">
							<h3 class="suggestionslist-li-heading">
								{{match.model.heading}}
							</h3>
							<div class="suggestionlist-li-content">
								<p ng-bind-html="match.model.content | wizdom365SmartHtmlStrip:100"></p>
							</div>
						</div>
					</div>
				</div>
			</a>
		</div>
	</script>
	<div>
		<div class="row">
			<div class="col-md-12">
				<h2>{{'Search' | translate}}</h2>
				<input type="text"
					   ng-model="selected"
					   placeholder="{{'Search'  | translate}}"
					   typeahead="item as item.heading for item in getSearchResults($viewValue)"
					   typeahead-loading="searchPlaceholder"
					   typeahead-no-results="noResults"
					   typeahead-template-url="customTemplate.html"
					   typeahead-min-length="2"
					   typeahead-on-select="onSelect($item, $model, $label)"
					   class="form-control">
				<i ng-show="searchPlaceholder" class="glyphicon glyphicon-refresh"></i>
				<div ng-show="noResults">
					{{'No Results Found' | translate}}
				</div>
			</div>
		</div>
		<br />
		<div class="row">
			<div ng-repeat="category in view.faqSet.categories" ng-if="category.questions.length > 0">
				<div ng-if="$index % 2 == 0" class="clearfix"></div>
				<div class="col-md-6">
					<div style="width: 100%; overflow: hidden;">
						<div style="width: 54px; float: left;">
							<span ng-show="category.pictureUrl">
								<img ng-src="{{category.pictureUrl}}" style="height:42px;width:42px;border-radius: 10px;" />
							</span>
							<span ng-hide="category.pictureUrl">
								<img ng-src="{{appUrl}}Modules/FAQ/Content/question_mark.png" style="height:42px;width:42px;border-radius: 10px;" />
							</span>
						</div>
						<div style="margin-left: 54px;">
							<span class="category-heading" ng-if="!category.isRoot">{{category.title}}</span>
							<div ng-repeat="question in category.questions track by $index" ng-show="question.isTopFAQ || category.showAll">
								<span ng-hide="webpartProperties.useDialog" class="question-heading" wizdom365-faq-slide-toggle="#row_{{question.id}}">
									<i class="glyphicon glyphicon-question-sign question-heading-icon" ng-hide="question.icon"></i>
									<wizdom365-icon class="question-heading-icon" icon="question.icon"></wizdom365-icon>
									<span>{{question.question}}</span>
								</span>
								<span ng-show="webpartProperties.useDialog" class="question-heading" ng-click="openDialog(question)">
									<i class="glyphicon glyphicon-question-sign question-heading-icon" ng-hide="question.icon"></i>
									<wizdom365-icon class="question-heading-icon" icon="question.icon"></wizdom365-icon>
									{{question.question}}
								</span>
								<div class="question-content">
									<div id="row_{{question.id}}" class="wizdom365-faq-slideable" duration="0.5s">
										<div style="margin-left:30px">
											<p ng-bind-html="question.answer | wizdom365TrustHtml"></p>
										</div>
									</div>
								</div>
							</div>
							<div class="text-center" ng-show="category.showShowAllButton" ng-click="category.showAll = !category.showAll">
								<a href="">
									<span ng-show="!category.showAll">{{'Show all questions' | translate}}</span>
									<span ng-show="category.showAll">{{'Hide all questions' | translate}}</span>
								</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>