<div ng-controller="SearchCtrl" ng-init="init()">

	<div class="dashboard-editor-header">
		<div class="dashboard-editor-title" style="border: 0; line-height: 41px;">
			<i class="fa fa-search"></i>
			Search
		</div>

		<div class="grafana-search-panel">
			<div class="search-field-wrapper">
				<button class="btn btn-success pull-right" dash-editor-link="app/partials/playlist.html" editor-scope="isolated">
					<i class="fa fa-play"></i>
					Playlist
				</button>
				<button class="btn btn-success pull-right" ng-click="toggleImport($event)">
					<i class="fa fa-download"></i>
					Import
				</button>
				<button class="btn btn-success pull-right" ng-click="newDashboard()">
					<i class="fa fa-th-large"></i>
					New
				</button>
				<span style="position: relative;">
					<input  type="text" placeholder="search dashboards, metrics, or graphs" xng-focus="giveSearchFocus"
									ng-keydown="keyDown($event)" ng-model="query.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="search()" />
					<a class="search-tagview-switch" href="javascript:void(0);" ng-class="{'active': tagsOnly}" ng-click="showTags($event)">tags</a>
				</span>
			</div>
		</div>
	</div>

	<div ng-if="!showImport">
		<h6 ng-hide="results.dashboards.length">No dashboards matching your query were found.</h6>
		<div class="search-results-container" ng-if="tagsOnly">
			<div class="row">
				<div class="span6 offset1">
			<div ng-repeat="tag in results.tags" class="pointer" style="width: 180px; float: left;"
				ng-class="{'selected': $index === selectedIndex }"
				ng-click="filterByTag(tag.term, $event)">
				<a class="search-result-tag label label-tag" tag-color-from-name>
					<i class="fa fa-tag"></i>
					<span>{{tag.term}} &nbsp;({{tag.count}})</span>
				</a>
			</div>
			</div>
			</div>
		</div>

		<div class="search-results-container" ng-if="!tagsOnly">
			<div class="search-result-item pointer" bindonce ng-repeat="row in results.dashboards"
				ng-class="{'selected': $index === selectedIndex }" ng-click="goToDashboard(row.id)">

				<div class="search-result-actions small">
					<a ng-click="shareDashboard(row.id, row.id, $event)" config-modal="app/partials/dashLoaderShare.html">
						<i class="fa fa-share"></i> share &nbsp;&nbsp;&nbsp;
					</a>
					<a ng-click="deleteDashboard(row, $event)">
						<i class="fa fa-remove"></i> delete
					</a>
				</div>

				<div class="search-result-tags">
					<a ng-click="filterByTag(tag, $event)" ng-repeat="tag in row.tags" tag-color-from-name  class="label label-tag">
						{{tag}}
					</a>
				</div>

				<a class="search-result-link">
					<i class="fa fa-th-large"></i>
					<span bo-text="row.title"></span>
				</a>

			</div>
		</div>
	</div>

	<div class="editor-row" ng-if="showImport">
		<div class="section">
			<div class="editor-option">
				<h5>Local File <tip>Load dashboard JSON layout from file</tip></h5>
				<form>
					<input type="file" id="dashupload" dash-upload/><br>
				</form>
			</div>
		</div>
	</div>

</div>
