<div class="sidebar-container visEditorSidebar__container">
  <form
    class="sidebar-list visEditorSidebar__form"
    ng-submit="visualizeEditor.$invalid ? stageEditableVis(false) : stageEditableVis()"
    name="visualizeEditor"
    novalidate
    ng-keydown="submitEditorWithKeyboard($event)"
  ><!-- see http://goo.gl/9kgz5w -->

    <div
      css-truncate
      aria-label="{{:: 'Index pattern: ' + vis.indexPattern.title}}"
      ng-if="vis.type.requiresSearch && vis.type.options.showIndexSelection"
      class="index-pattern visEditorSidebar__indexPattern"
      tabindex="0"
      id="sidebarIndexPatternTitle"
    >
      {{ vis.indexPattern.title }}
    </div>

    <nav class="navbar navbar-default subnav visEditorSidebar__nav">
      <div class="container-fluid">

        <!-- tabs -->
        <ul class="nav navbar-nav" role="tablist">
          <li
            role="tab"
            aria-selected="{{sidebar.section === 'data'}}"
            ng-class="{active: sidebar.section == 'data'}"
            ng-show="sidebar.showData"
          >
            <a
              class="visEditorSidebar__navLink"
              ng-class="{'visEditorSidebar__navLink-isSelected': sidebar.section == 'data'}"
              ng-click="sidebar.section='data'"
              kbn-accessible-click
              data-test-subj="visualizeEditDataLink"
            >
              Data
            </a>
          </li>

          <li
            role="tab"
            aria-selected="{{sidebar.section === tab.name}}"
            ng-repeat="tab in vis.type.editorConfig.optionTabs"
            ng-class="{active: sidebar.section == tab.name}"
            ng-if="vis.type.editorConfig.optionTabs.length > 1 || sidebar.showData"
          >
            <a
              class="visEditorSidebar__navLink"
              ng-class="{'visEditorSidebar__navLink-isSelected': sidebar.section == tab.name}"
              ng-click="sidebar.section=tab.name"
              kbn-accessible-click
              data-test-subj="{{ 'visEditorTab' + tab.name }}"
            >
              {{tab.title}}
            </a>
          </li>
        </ul>

        <!-- controls -->
        <ul class="nav navbar-nav navbar-right">
          <li
            ng-if="visualizeEditor.softErrorCount() > 0"
            disabled
            tooltip="{{ visualizeEditor.describeErrors() }}"
            tooltip-placement="bottom"
            tooltip-popup-delay="400"
            tooltip-append-to-body="1"
          >
            <div
              class="kuiButton kuiButton--danger navbar-btn-link visEditorSidebar__navButtonLink"
              aria-label="{{ visualizeEditor.describeErrors() }}"
            >
              <icon aria-hidden="true" type="'alert'" color="'danger'"></icon>
            </div>
          </li>

          <li
            tooltip="Auto apply changes"
            tooltip-placement="bottom"
            tooltip-popup-delay="400"
            tooltip-append-to-body="1"
            ng-if="vis.type.editorConfig.enableAutoApply"
          >
            <button
              data-test-subj="visualizeEditorAutoButton"
              class="kuiButton kuiButton--basic navbar-btn-link visEditorSidebar__navButtonLink"
              aria-label="Auto update the visualization on every change"
              ng-click="toggleAutoApply()"
              ng-class="{
                'kuiButton--primary': autoApplyEnabled,
                'kuiButton--basic': !autoApplyEnabled
              }"
            >
              <icon aria-hidden="true" type="'refresh'"></icon>
            </button>
          </li>
              <span ng-show="autoApplyEnabled">Auto Apply</span>

          <li
            tooltip="Apply changes"
            tooltip-placement="bottom"
            tooltip-popup-delay="400" tooltip-append-to-body="1"
            ng-hide="autoApplyEnabled"
          >
            <button
              data-test-subj="visualizeEditorRenderButton"
              class="kuiButton kuiButton--primary navbar-btn-link visEditorSidebar__navButtonLink"
              type="submit"
              ng-disabled="!vis.dirty || visualizeEditor.errorCount() > 0 || autoApplyEnabled"
              aria-label="Update the visualization with your changes"
            >
              <icon aria-hidden="true" type="'play'"></icon>
            </button>
          </li>

          <li
            tooltip="Discard changes"
            tooltip-placement="bottom"
            tooltip-popup-delay="400"
            tooltip-append-to-body="1"
            ng-hide="autoApplyEnabled"
          >
            <button
              data-test-subj="visualizeEditorResetButton"
              class="kuiButton kuiButton--basic navbar-btn-link visEditorSidebar__navButtonLink"
              ng-disabled="!vis.dirty"
              ng-click="resetEditableVis()"
              aria-label="Reset the visualization"
            >
              <icon type="'cross'"></icon>
            </button>
          </li>
        </ul>
      </div>
    </nav>

    <div class="visEditorSidebar__config" ng-show="sidebar.section == 'data'">
      <!-- metrics -->
      <vis-editor-agg-group ng-if="vis.type.schemas.metrics" data-test-subj="metricsAggGroup" group-name="metrics"></vis-editor-agg-group>

      <!-- buckets -->
      <vis-editor-agg-group ng-if="vis.type.schemas.buckets" data-test-subj="bucketsAggGroup" group-name="buckets"></vis-editor-agg-group>
    </div>

    <div class="visEditorSidebar__config" ng-repeat="tab in vis.type.editorConfig.optionTabs" ng-show="sidebar.section == tab.name">
      <vis-editor-vis-options
        class="visEditorSidebar__options"
        editor-state="state"
        vis="vis"
        vis-data="visData"
        ui-state="uiState"
        visualize-editor="visualizeEditor"
        editor="tab.editor"
      ></vis-editor-vis-options>
    </div>

  </form>
</div>
