<div class="tight-form">
	<ul class="tight-form-list pull-right">
		<li class="tight-form-item small" ng-show="target.datasource">
			<em>{{target.datasource}}</em>
		</li>
		<li class="tight-form-item">
			<div class="dropdown">
				<a class="pointer dropdown-toggle" data-toggle="dropdown" tabindex="1">
					<i class="fa fa-bars"></i>
				</a>
				<ul class="dropdown-menu pull-right" role="menu">
					<li role="menuitem"><a tabindex="1" ng-click="toggleQueryMode()">Switch editor mode</a></li>
					<li role="menuitem"><a tabindex="1" ng-click="duplicateDataQuery(target)">Duplicate</a></li>
					<li role="menuitem"><a tabindex="1" ng-click="moveDataQuery($index, $index-1)">Move up</a></li>
					<li role="menuitem"><a tabindex="1" ng-click="moveDataQuery($index, $index+1)">Move down</a></li>
				</ul>
			</div>
		</li>
		<li class="tight-form-item last">
			<a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
				<i class="fa fa-remove"></i>
			</a>
		</li>
	</ul>

	<ul class="tight-form-list">
		<li class="tight-form-item" style="min-width: 15px; text-align: center">
			{{target.refId}}
		</li>
		<li>
			<a  class="tight-form-item"
				ng-click="target.hide = !target.hide; get_data();"
				role="menuitem">
				<i class="fa fa-eye"></i>
			</a>
		</li>
	</ul>

	<ul class="tight-form-list" role="menu">
		<li class="tight-form-item query-keyword" style="width: 100px">
			Metric
		</li>
		<li>
			<input type="text" class="input-large tight-form-input" ng-model="target.metric"
			spellcheck='false' bs-typeahead="suggestMetrics" placeholder="metric name" data-min-length=0 data-items=100
			ng-blur="targetBlur()">
			</input>
			<a bs-tooltip="target.errors.metric" style="color: rgb(229, 189, 28)" ng-show="target.errors.metric">
				<i class="fa fa-warning"></i>
			</a>
		</li>
		<li class="tight-form-item query-keyword">
			Aggregator
		</li>
		<li>
			<select ng-model="target.aggregator" class="tight-form-input input-small"
				ng-options="agg for agg in aggregators"
				ng-change="targetBlur()">
			</select>
			<a bs-tooltip="target.errors.aggregator" style="color: rgb(229, 189, 28)" ng-show="target.errors.aggregator">
				<i class="fa fa-warning"></i>
			</a>
		</li>

		<li class="tight-form-item query-keyword">
			Alias:
			<tip>Use patterns like $tag_tagname to replace part of the alias for a tag value</tip>
		</li>
		<li>
			<input type="text" class="tight-form-input input-large"
			ng-model="target.alias"
			spellcheck='false'
			placeholder="series alias"
			data-min-length=0 data-items=100
			ng-blur="targetBlur()"></input>
		</li>
	</ul>

	<div class="clearfix"></div>
</div>

<div class="tight-form">
	<ul class="tight-form-list" role="menu">
		<li class="tight-form-item tight-form-align query-keyword" style="width: 100px">
			Down sample
		</li>

		<li>
			<input type="text" class="input-large tight-form-input"
			ng-model="target.downsampleInterval"
			ng-model-onblur
			ng-change="targetBlur()"
			placeholder="interval (empty = auto)"></input>
		</li>

		<li class="tight-form-item query-keyword">
			Aggregator
		</li>

		<li>
			<select ng-model="target.downsampleAggregator" class="tight-form-input input-small"
				ng-options="agg for agg in aggregators"
				ng-change="targetBlur()">
			</select>
		</li>

		<li class="tight-form-item query-keyword">
			Disable downsampling <editor-checkbox text="" model="target.disableDownsampling" change="targetBlur()"></editor-checkbox>
		</li>

	</ul>
	<div class="clearfix"></div>
</div>

<div class="tight-form">
	<ul class="tight-form-list" role="menu">
		<li class="tight-form-item tight-form-align query-keyword" style="width: 100px">
			Tags
		</li>
		<li ng-repeat="(key, value) in target.tags track by $index" class="tight-form-item">
			  {{key}}&nbsp;=&nbsp;{{value}}
			<a ng-click="editTag(key, value)">
        <i class="fa fa-pencil"></i>
      </a>
      <a ng-click="removeTag(key)">
				<i class="fa fa-remove"></i>
			</a>
		</li>

		<li class="tight-form-item query-keyword" ng-hide="addTagMode">
			<a ng-click="addTag()">
				<i class="fa fa-plus"></i>
			</a>
		</li>

		<li ng-show="addTagMode">
			<input type="text" class="input-small tight-form-input" spellcheck='false'
			bs-typeahead="suggestTagKeys" data-min-length=0 data-items=100
			ng-model="target.currentTagKey" placeholder="key"></input>

			<input type="text" class="input-small tight-form-input"
			spellcheck='false' bs-typeahead="suggestTagValues"
			data-min-length=0 data-items=100 ng-model="target.currentTagValue" placeholder="value">
			</input>
			<a ng-click="addTag()">
				add tag
			</a>
			<a bs-tooltip="target.errors.tags"
				style="color: rgb(229, 189, 28)"
				ng-show="target.errors.tags">
				<i class="fa fa-warning"></i>
			</a>
		</li>
	</ul>
	<div class="clearfix"></div>
</div>

<div class="tight-form">
	<ul class="tight-form-list" role="menu">
		<li class="tight-form-item tight-form-align query-keyword" style="width: 100px">
			Rate <editor-checkbox text="" model="target.shouldComputeRate" change="targetBlur()"></editor-checkbox>
		</li>

		<li class="tight-form-item query-keyword" ng-hide="!target.shouldComputeRate">
			Counter <editor-checkbox text="" model="target.isCounter" change="targetBlur()"></editor-checkbox>
		</li>

		<li class="tight-form-item query-keyword" ng-hide="!target.isCounter || !target.shouldComputeRate">
			Counter Max:
		</li>

		<li ng-hide="!target.isCounter || !target.shouldComputeRate">
			<input type="text" class="tight-form-input input-small" ng-disabled="!target.shouldComputeRate"
			ng-model="target.counterMax" spellcheck='false'
			placeholder="max value" ng-model-onblur
			ng-blur="targetBlur()"></input>
		</li>
		<li class="tight-form-item query-keyword" ng-hide="!target.isCounter || !target.shouldComputeRate">
			Reset Value:
		</li>
		<li ng-hide="!target.isCounter || !target.shouldComputeRate">
			<input type="text" class="tight-form-input input-small" ng-disabled="!target.shouldComputeRate"
			ng-model="target.counterResetValue" spellcheck='false'
			placeholder="reset value" ng-model-onblur
			ng-blur="targetBlur()"></input>
		</li>
	</ul>

	<div class="clearfix"></div>
</div>
