<div class="gf-form-group">
	<div class="gf-form">
		<span class="gf-form-label width-10">Search expression</span>
		<input type="text" class="gf-form-input" ng-model='ctrl.annotation.expr' placeholder="ALERTS"></input>
	</div>
	<div class="gf-form">
		<span class="gf-form-label width-10">Step</span>
		<input type="text" class="gf-form-input max-width-6" ng-model='ctrl.annotation.step' placeholder="{{::ctrl.stepDefaultValuePlaceholder}}"></input>
	</div>
</div>

<div class="gf-form-group">
	<h5 class="section-heading">Field formats<tip>For title and text fields, use either the name or a pattern. For example, {{instance}} is replaced with label value for the label instance.</tip></h5>
	<div class="gf-form-inline">
		<div class="gf-form">
			<span class="gf-form-label width-5">Title</span>
			<input type="text" class="gf-form-input max-width-9" ng-model='ctrl.annotation.titleFormat' placeholder="alertname"></input>
		</div>
		<div class="gf-form">
			<span class="gf-form-label width-5">Tags</span>
			<input type="text" class="gf-form-input max-width-9" ng-model='ctrl.annotation.tagKeys' placeholder="label1,label2"></input>
		</div>
		<div class="gf-form-inline">
			<div class="gf-form">
				<span class="gf-form-label width-5">Text</span>
				<input type="text" class="gf-form-input max-width-9" ng-model='ctrl.annotation.textFormat' placeholder="instance"></input>
			</div>
		</div>
	</div>

	<h5 class="section-heading">Other options</h5>
	<div class="gf-form-inline">
		<div class="gf-form">
			<gf-form-switch class="gf-form" label="Series value as timestamp" label-class="width-14" checked="ctrl.annotation.useValueForTime"
			 tooltip="The unit of timestamp is milliseconds. If the unit of the series value is seconds, multiply its range vector by 1000.">
			</gf-form-switch>
		</div>
	</div>
</div>
