<div class="tabbed-view-header">
	<h2 class="tabbed-view-title">
		Settings
	</h2>

	<ul class="gf-tabs">
		<li class="gf-tabs-item" ng-repeat="tab in ::['General', 'Rows', 'Links', 'Time picker', 'Metadata']">
			<a class="gf-tabs-link" ng-click="editor.index = $index" ng-class="{active: editor.index === $index}">
				{{::tab}}
			</a>
		</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 ng-if="editor.index == 0">

		<div class="gf-form-group section">
      <h5 class="section-heading">Details</h5>
			<div class="gf-form">
				<label class="gf-form-label width-7">Name</label>
				<input type="text" class="gf-form-input width-30" ng-model='dashboard.title'></input>
			</div>
      <div class="gf-form">
				<label class="gf-form-label width-7">Description</label>
				<input type="text" class="gf-form-input width-30" ng-model='dashboard.description'></input>
			</div>
      <div class="gf-form">
				<label class="gf-form-label width-7">
          Tags
          <info-popover mode="right-normal">Press enter to add a tag</info-popover>
        </label>
				<bootstrap-tagsinput ng-model="dashboard.tags" tagclass="label label-tag" placeholder="add tags">
				</bootstrap-tagsinput>
			</div>

			<div class="gf-form">
				<label class="gf-form-label width-7">Timezone</label>
				<div class="gf-form-select-wrapper">
					<select ng-model="dashboard.timezone" class='gf-form-input' ng-options="f.value as f.text for f in [{value: '', text: 'Default'}, {value: 'browser', text: 'Local browser time'},{value: 'utc', text: 'UTC'}]" ng-change="timezoneChanged()"></select>
				</div>
			</div>
		</div>

    <div class="section">
      <h5 class="section-heading">Toggles</h5>
      <div class="gf-form-group">
        <gf-form-switch class="gf-form"
                        label="Editable"
                        tooltip="Uncheck, then save and reload to disable all dashboard editing"
                        checked="dashboard.editable"
                        label-class="width-11">
        </gf-form-switch>
				<gf-form-switch class="gf-form"
                        label="Hide Controls"
                        tooltip="Hide row controls. Shortcut: CTRL+H or CMD+H"
                        checked="dashboard.hideControls"
                        label-class="width-11">
        </gf-form-switch>
      </div>
    </div>

    <div class="section">
      <h5 class="section-heading">Panel Options</h5>
      <div class="gf-form">
        <label class="gf-form-label width-11">
          Graph Tooltip
          <info-popover mode="right-normal">
            Cycle between options using Shortcut: CTRL+O or CMD+O
          </info-popover>
        </label>
        <div class="gf-form-select-wrapper">
          <select ng-model="dashboard.graphTooltip" class='gf-form-input' ng-options="f.value as f.text for f in [{value: 0, text: 'Default'}, {value: 1, text: 'Shared crosshair'},{value: 2, text: 'Shared Tooltip'}]"></select>
        </div>
      </div>
    </div>

	</div>

	<div ng-if="editor.index == 1">
		<h5 class="section-heading">Rows settings</h5>

		<div class="gf-form-group">
			<div class="gf-form-inline" ng-repeat="row in dashboard.rows">
				<div class="gf-form">
					<span class="gf-form-label">Title</span>
					<input type="text" class="gf-form-input max-width-14" ng-model='row.title'></input>
				</div>
				<gf-form-switch class="gf-form" label="Show title" checked="row.showTitle" switch-class="max-width-6"></gf-form-switch>

				<div class="gf-form">
					<button class="btn btn-inverse gf-form-btn" ng-click="_.move(dashboard.rows,$index,$index-1)">
						<i ng-class="{'invisible': $first}" class="fa fa-arrow-up"></i>
					</button>
					<button class="btn btn-inverse gf-from-btn" ng-click="_.move(dashboard.rows,$index,$index+1)">
						<i ng-class="{'invisible': $last}" class="fa fa-arrow-down"></i>
					</button>
					<button class="btn btn-inverse gf-form-btn" ng-click="dashboard.rows = _.without(dashboard.rows,row)">
						<i class="fa fa-trash"></i>
					</button>
				</div>
			</div>
		</div>
	</div>

	<div ng-if="editor.index == 2">
		<dash-links-editor></dash-links-editor>
	</div>

	<div ng-if="editor.index == 3">
		<gf-time-picker-settings dashboard="dashboard"></gf-time-picker-settings>
	</div>

	<div ng-if="editor.index == 4">
		<h5 class="section-heading">Dashboard info</h5>
		<div class="gf-form-group">
			<div class="gf-form">
				<span class="gf-form-label width-10">Last updated at:</span>
				<span class="gf-form-label width-18">{{dashboard.formatDate(dashboardMeta.updated)}}</span>
			</div>
			<div class="gf-form">
				<span class="gf-form-label width-10">Last updated by:</span>
				<span class="gf-form-label width-18">{{dashboardMeta.updatedBy}}&nbsp;</span>
			</div>
			<div class="gf-form">
				<span class="gf-form-label width-10">Created at:</span>
				<span class="gf-form-label width-18">{{dashboard.formatDate(dashboardMeta.created)}}&nbsp;</span>
			</div>
			<div class="gf-form">
				<span class="gf-form-label width-10">Created by:</span>
				<span class="gf-form-label width-18">{{dashboardMeta.createdBy}}&nbsp;</span>
			</div>
			<div class="gf-form">
				<span class="gf-form-label width-10">Current version:</span>
				<span class="gf-form-label width-18">{{dashboardMeta.version}}&nbsp;</span>
			</div>
		</div>
	</div>
</div>
