<div class="playlist-search-field-wrapper">
  <span style="position: relative;">
    <input  type="text" placeholder="Find dashboards by name" tabindex="1"
    ng-keydown="ctrl.keyDown($event)" ng-model="ctrl.query.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="ctrl.searchDashboards()" />
		<div class="playlist-search-switches">
			<i class="fa fa-filter"></i>
			<a class="pointer" href="javascript:void 0;" ng-click="ctrl.showStarred()" tabindex="2">
				<i class="fa fa-remove" ng-show="ctrl.query.starred"></i>
				starred
			</a> |
			<a class="pointer" href="javascript:void 0;" ng-click="ctrl.getTags()" tabindex="3">
				<i class="fa fa-remove" ng-show="ctrl.tagsMode"></i>
				tags
			</a>
			<span ng-if="ctrl.query.tag.length">
				|
				<span ng-repeat="tagName in ctrl.query.tag">
					<a ng-click="ctrl.removeTag(tagName, $event)" tag-color-from-name="ctrl.tagName" class="label label-tag">
						<i class="fa fa-remove"></i>
						{{tagName}}
					</a>
				</span>
			</span>
		</div>
	</span>
</div>
