<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>

	<!-- Raw Query mode  -->
	<input type="text" class="tight-form-clear-input" style="width: 80%" ng-model="target.query"
	placeholder="select ..." ng-show="target.rawQuery"
	give-focus="target.rawQuery"
	spellcheck='false'
	data-min-length=0 data-items=100
	ng-model-onblur
	ng-blur="get_data()"></input>

	<!-- Query editor mode -->
	<ul class="tight-form-list" role="menu" ng-hide="target.rawQuery">
		<li class="tight-form-item">
			series
		</li>
		<li>
			<input type="text"
			class="tight-form-input span8"
			ng-model="target.series"
			spellcheck='false'
			bs-typeahead="listSeries"
			match-all="true"
			min-length="3"
			placeholder="series name"
			data-min-length=0 data-items=100
			ng-blur="seriesBlur()">
		</li>

		<li class="tight-form-item">
			alias
		</li>

		<li>
			<input type="text" class="input-medium tight-form-input" ng-model="target.alias"
			spellcheck='false' placeholder="alias" ng-blur="get_data()">
		</li>

	</ul>

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

<div class="tight-form">
	<!-- Raw Query mode  -->
	<ul class="tight-form-list" ng-show="target.rawQuery">
		<li class="tight-form-item tight-form-align">
			alias
		</li>
		<li>
			<input type="text"
			class="input-medium tight-form-input"
			ng-model="target.alias"
			spellcheck='false'
			placeholder="alias"
			ng-blur="get_data()">
		</li>
		<li class="tight-form-item">
			group by time
		</li>
		<li>
			<input type="text" class="input-mini tight-form-input" ng-model="target.interval"
			spellcheck='false' placeholder="{{interval}}" data-placement="right"
			bs-tooltip="'Leave blank for auto handling based on time range and panel width'"
			ng-model-onblur ng-change="get_data()" >
		</li>
	</ul>

	<!-- Query editor mode -->
	<ul class="tight-form-list" role="menu" ng-hide="target.rawQuery">
		<li class="tight-form-item tight-form-align">
			select
		</li>
		<li class="dropdown">
			<span influxdb-func-editor08 class="tight-form-item tight-form-func">
			</span>
		</li>

		<li class="tight-form-item">
			where
		</li>
		<li>
			<input type="text" class="input-medium tight-form-input" ng-model="target.condition"
			bs-tooltip="'Add a where clause'" data-placement="right" spellcheck='false' placeholder="column ~= value" ng-blur="get_data()">
		</li>

		<li class="tight-form-item">
			group by time
		</li>
		<li>
			<input type="text" class="input-mini tight-form-input" ng-model="target.interval"
			spellcheck='false' placeholder="{{interval}}" data-placement="right"
			bs-tooltip="'Leave blank for auto handling based on time range and panel width'"
			ng-model-onblur ng-change="get_data()" >
		</li>

		<li class="tight-form-item">
			and
		</li>

		<li>
			<input type="text" class="input-small tight-form-input" ng-model="target.groupby_field" bs-tooltip="'Add a group by column or leave blank'"
			placeholder="column" spellcheck="false" bs-typeahead="listColumns" data-min-length=0 ng-blur="get_data()">
		</li>

		<li class="dropdown">
			<a class="tight-form-item pointer" data-toggle="dropdown" bs-tooltip="'Insert missing values, important when stacking'" data-placement="right">
				<span ng-show="target.fill">
					fill ({{target.fill}})
				</span>
				<span ng-show="!target.fill">
					no fill
				</span>
			</a>
			<ul class="dropdown-menu">
				<li><a ng-click="target.fill = ''">no fill</a></li>
				<li><a ng-click="target.fill = 'null'">fill (null)</a></li>
				<li><a ng-click="target.fill = '0'">fill (0)</a></li>
			</ul>
		</li>
	</ul>
	<div class="clearfix"></div>
</div>


