<div ng-controller="AnnotationsEditorCtrl" ng-init="init()"><div class="tabbed-view-header"><h2 class="tabbed-view-title">Annotations</h2><ul class="gf-tabs"><li class="gf-tabs-item"><a class="gf-tabs-link" ng-click="mode = 'list';" ng-class="{active: mode === 'list'}">List</a></li><li class="gf-tabs-item" ng-show="mode === 'edit'"><a class="gf-tabs-link" ng-class="{active: mode === 'edit'}">{{currentAnnotation.name}}</a></li><li class="gf-tabs-item" ng-show="mode === 'new'"><span class="active gf-tabs-link">New</span></li></ul><button class="tabbed-view-close-btn" ng-click="dismiss();"><i class="fa fa-remove"></i></button></div><div class="tabbed-view-body"><div class="editor-row row" ng-if="mode === 'list'"><div ng-if="annotations.length === 0"><em>No annotations defined</em></div><table class="grafana-options-table"><tr ng-repeat="annotation in annotations"><td style="width:90%"><i class="fa fa-bolt" style="color:{{annotation.iconColor}}"></i> &nbsp; {{annotation.name}}</td><td style="width: 1%"><i ng-click="_.move(annotations,$index,$index-1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i></td><td style="width: 1%"><i ng-click="_.move(annotations,$index,$index+1)" ng-hide="$last" class="pointer fa fa-arrow-down"></i></td><td style="width: 1%"><a ng-click="edit(annotation)" class="btn btn-inverse btn-mini"><i class="fa fa-edit"></i> Edit</a></td><td style="width: 1%"><a ng-click="removeAnnotation(annotation)" class="btn btn-danger btn-mini"><i class="fa fa-remove"></i></a></td></tr></table></div><div class="gf-form" ng-show="mode === 'list'"><div class="gf-form-button-row"><a type="button" class="btn gf-form-button btn-success" ng-click="mode = 'new';"><i class="fa fa-plus"></i>&nbsp;&nbsp;New</a></div></div><div class="annotations-basic-settings" ng-if="mode === 'edit' || mode === 'new'"><div class="gf-form-group"><div class="gf-form-inline"><div class="gf-form gf-size-max-xxl"><span class="gf-form-label">Name</span> <input type="text" class="gf-form-input" ng-model="currentAnnotation.name" placeholder="name"></div><div class="gf-form"><span class="gf-form-label max-width-10">Datasource</span><div class="gf-form-select-wrapper"><select class="gf-form-input gf-size-auto" ng-model="currentAnnotation.datasource" ng-options="f.name as f.name for f in datasources" ng-change="datasourceChanged()"></select></div></div><div class="gf-form"><label class="gf-form-label"><span>Color</span></label><spectrum-picker class="gf-form-input" ng-model="currentAnnotation.iconColor"></spectrum-picker></div></div></div><rebuild-on-change property="currentDatasource"><plugin-component type="annotations-query-ctrl"></plugin-component></rebuild-on-change><div class="gf-form"><div class="gf-form-button-row p-y-0"><button ng-show="mode === 'new'" type="button" class="btn gf-form-button btn-success" ng-click="add()">Add</button> <button ng-show="mode === 'edit'" type="button" class="btn btn-success pull-left" ng-click="update()">Update</button></div></div></div></div></div>