<div class="dashboard-editor-header">
	<div class="dashboard-editor-title">
		<i class="fa fa-cogs"></i>
		Dashboard settings
	</div>

	<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
		<div ng-repeat="tab in ['General', 'Rows', 'Features', 'Import']" data-title="{{tab}}">
		</div>
		<div ng-repeat="tab in dashboard.nav" data-title="{{tab.type}}">
		</div>
	</div>

</div>

<div class="dashboard-editor-body">

		<div ng-if="editor.index == 0">
			<div class="editor-row">
				<div class="section">
					<div class="editor-option">
						<label class="small">Title</label><input type="text" class="input-large" ng-model='dashboard.title'></input>
					</div>
					<div class="editor-option">
						<label class="small">Theme</label><select class="input-small" ng-model="dashboard.style" ng-options="f for f in ['dark','light']" ng-change="styleUpdated()"></select>
					</div>
					<div class="editor-option">
						<label class="small">Time correction</label>
						<select ng-model="dashboard.timezone" class='input-small' ng-options="f for f in ['browser','utc']"></select>
					</div>
					<editor-opt-bool text="Hide controls (CTRL+H)" model="dashboard.hideControls"></editor-opt-bool>
				</div>
			</div>
			<div class="editor-row">
				<div class="section">
					<div class="editor-option">
						<label class="small">Tags</label>
						<bootstrap-tagsinput ng-model="dashboard.tags" tagclass="label label-tag" placeholder="add tags">
						</bootstrap-tagsinput>
						<tip>Press enter to a add tag</tip>
					</div>
				</div>
			</div>
		</div>

		<div ng-if="editor.index == 1">
			<div class="editor-row">
				<div class="span6">
					<table class="grafana-options-table">
						<tr ng-repeat="row in dashboard.rows">
							<td style="width: 97%">
								{{row.title}}
							</td>
							<td><i ng-click="_.move(dashboard.rows,$index,$index-1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i></td>
							<td><i ng-click="_.move(dashboard.rows,$index,$index+1)" ng-hide="$last" class="pointer fa fa-arrow-down"></i></td>
							<td>
								<a ng-click="dashboard.rows = _.without(dashboard.rows,row)" class="btn btn-danger btn-small">
									<i class="fa fa-remove"></i>
								</a>
							</td>
						</tr>
					</table>
				</div>
			</div>
		</div>

		<div ng-if="editor.index == 2">
			<div class="editor-row">
				<div class="section">
					<editor-opt-bool text="Templating" model="dashboard.templating.enable" change="checkFeatureToggles()"></editor-opt-bool>
					<editor-opt-bool text="Annotations" model="dashboard.annotations.enable" change="checkFeatureToggles()"></editor-opt-bool>
					<div class="editor-option text-center" ng-repeat="pulldown in dashboard.nav">
						<label class="small" style="text-transform:capitalize;">{{pulldown.type}}</label>
						<input class="cr1" id="pulldown{{pulldown.type}}" type="checkbox" ng-model="pulldown.enable" ng-checked="pulldown.enable">
						<label for="pulldown{{pulldown.type}}" class="cr1"></label>
					</div>
          <editor-opt-bool text="Shared Crosshair (CTRL+O)" model="dashboard.sharedCrosshair"></editor-opt-bool>
				</div>
			</div>
		</div>

		<div ng-if="editor.index == 3">
			<ng-include src="'app/partials/import.html'"></ng-include>
		</div>

		<div ng-repeat="pulldown in dashboard.nav" ng-controller="SubmenuCtrl" ng-show="editor.index == 4+$index">
			<ng-include ng-show="pulldown.enable" src="pulldownEditorPath(pulldown.type)"></ng-include>
			<button ng-hide="pulldown.enable" class="btn" ng-click="pulldown.enable = true">Enable the {{pulldown.type}}</button>
		</div>

	</div>

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

<div class="dashboard-editor-footer">
	<div class="grafana-version-info" ng-show="editor.index === 0">
		<span class="editor-option small">
			Grafana version: {{grafanaVersion}} &nbsp;&nbsp;
		</span>
		<span grafana-version-check>
		</span>
	</div>

	<button type="button" class="btn btn-success pull-right" ng-click="editor.index=0;dismiss();reset_panel();dashboard.emit_refresh()">Close</button>
</div>
