<div ng-if="ctrl.dataWarnings" style="margin-bottom:20px;">
  <div ng-repeat="warn in ctrl.dataWarnings" style="margin-bottom:3px; padding:5px; border:1px solid red;">
    {{warn}}
  </div>
</div>

<div class="edit-tab-with-sidemenu">
  <aside class="edit-sidemenu-aside" style="min-width: 100px">
    <ul class="edit-sidemenu">
      <li
        ng-repeat="trace in ctrl.traces"
        ng-class="{ active: ctrl.editor.traceIndex === $index }"
      >
        <a ng-click="ctrl.editor.selectTrace( $index )">{{ trace.name }}</a>
      </li>
      <li>
        <!-- TODO: Better move style to CSS file -->
        <button
          class="btn btn-success" ng-click="ctrl.editor.createTrace();"
          style="margin-bottom: 5px; width: 100%"
        >
          <i class="fa fa-plus"/> Add new
        </button>
      </li>
      <li>
        <button
          class="btn btn-danger" ng-click="ctrl.editor.removeCurrentTrace();"
          ng-if="ctrl.traces.length > 1"
          style="width: 100%"
        >
          <i class="fa fa-trash"/> Delete
        </button>
      </li>
    </ul>
  </aside>

  <div class="edit-tab-content">

    <div class="section gf-form-group">
      <h5 class="section-heading">Trace</h5>
      <div class="section gf-form-group gf-form-inline">
        <div class="gf-form">
          <label class="gf-form-label width-7">Name</label>
          <input
            class="gf-form-input width-7"
            ng-model="ctrl.editor.trace.name" 
            ng-blur="ctrl.onConfigChanged();"
          />
        </div>
      </div>

      <h5 class="section-heading">Metrics</h5>
      <div class="section gf-form-inline">
        <div class="gf-form"  
          ng-repeat="axis in ctrl.editor.axis">
          <label class="gf-form-label width-7">{{axis.label}}</label>
          <metric-segment 
            segment="axis.segment" 
            get-options="ctrl.editor.getSeriesSegs()" 
            on-change="ctrl.editor.onAxisSeriesChanged(axis)"></metric-segment>
        </div>
      </div>
    </div>

    <div class="section gf-form-group">
      <h5 class="section-heading">Markers</h5>
      <gf-form-switch 
        class="gf-form" 
        label="Show" 
        label-class="gf-form-label width-7"
        checked="ctrl.editor.trace.show.markers" 
        on-change="ctrl.onConfigChanged()"></gf-form-switch>

      <div ng-if="ctrl.editor.trace.show.markers">
        <div class="gf-form">
          <label class="gf-form-label width-7">Symbol</label>
          <metric-segment 
            segment="ctrl.editor.symbol" 
            get-options="ctrl.editor.getSymbolSegs()" 
            on-change="ctrl.editor.onSymbolChanged()"></metric-segment>
        </div>

        <div class="gf-form">
          <label class="gf-form-label width-7">Size</label>
          <input 
            type="number" 
            class="gf-form-input width-7" 
            ng-model="ctrl.editor.trace.settings.marker.size" 
            spellcheck="false"
            placeholder="5" ng-blur="ctrl.onConfigChanged()" />
        </div>

        <!--
        <div class="gf-form" ng-if="ctrl.cfg.mapping.size">
          <label class="gf-form-label width-7">- Min</label>
          <input type="number" class="gf-form-input width-7" ng-model="ctrl.editor.trace.settings.marker.sizemin" spellcheck="false"
            placeholder="5" ng-blur="ctrl.onConfigChanged()" />
          <a href="https://plot.ly/javascript/reference/#scatter-marker-sizemin">
            <i class="fa fa-external-link" aria-hidden="true"></i>
          </a>
        </div>

        <div class="gf-form" ng-if="ctrl.cfg.mapping.size">
          <label class="gf-form-label width-7">- Ref</label>
          <input type="number" class="gf-form-input width-7" ng-model="ctrl.editor.trace.settings.marker.sizeref" spellcheck="false"
            placeholder="5" ng-blur="ctrl.onConfigChanged()" />
          <a href="https://plot.ly/javascript/reference/#scatter-marker-sizeref">
            <i class="fa fa-external-link" aria-hidden="true"></i>
          </a>
        </div>
        <div class="gf-form" ng-if="ctrl.cfg.mapping.size">
          <label class="gf-form-label width-7">- Mode</label>
          <div class="gf-form-select-wrapper max-width-14">
            <select class="gf-form-input" ng-model="ctrl.editor.trace.settings.marker.sizemode" ng-change="ctrl.onConfigChanged()">
              <option value="diameter">Diameter</option>
              <option value="area">Area</option>
            </select>
          </div>
          <a href="https://plot.ly/javascript/reference/#scatter-marker-sizemode">
            <i class="fa fa-external-link" aria-hidden="true"></i>
          </a>
        </div>
        -->

        <div class="gf-form">
          <label class="gf-form-label width-7">Color</label>
          <div class="gf-form-select-wrapper max-width-14">
            <select class="gf-form-input" ng-model="ctrl.editor.trace.settings.color_option" ng-change="ctrl.onConfigChanged()">
              <option value="ramp">Ramp</option>
              <option value="solid">Solid</option>
            </select>
          </div>
        </div>

        <div class="gf-form" 
          ng-if="ctrl.editor.trace.settings.color_option === 'solid'" 
          >
          <label class="gf-form-label width-7">- Solid</label>
          <input type="text" placeholder="text" ng-model="ctrl.editor.trace.settings.marker.color" class="gf-form-input width-10"
            ng-blur="ctrl.onConfigChanged()" />
          <span class="gf-form-label">
            <spectrum-picker 
              ng-model="ctrl.editor.trace.settings.marker.color" 
              ng-change="ctrl.onConfigChanged()" />
          </span>
        </div>

        <div class="gf-form" 
          ng-repeat="metric in ctrl.editor.getColorSegments()">
          <label class="gf-form-label width-7">- Metric</label>
          <metric-segment 
            segment="metric" 
            get-options="ctrl.editor.getSeriesSegs()" 
            on-change="ctrl.editor.onColorChanged()"></metric-segment>
        </div>

        <div class="gf-form" ng-if="ctrl.editor.trace.settings.color_option != 'solid'">
          <label class="gf-form-label width-7">- Scale</label>
          <div class="gf-form-select-wrapper max-width-14">
            <select class="gf-form-input" ng-model="ctrl.editor.trace.settings.marker.colorscale" ng-change="ctrl.onConfigChanged()">
              <option value="">Default</option>
              <option value="Greys">Greys<option>
              <option value="YlGnBu">YlGnBu<option>
              <option value="Greens">Greens<option>
              <option value="YlOrRd">YlOrRd<option>
              <option value="Bluered">Bluered<option>
              <option value="RdBu">RdBu<option>
              <option value="Reds">Reds<option>
              <option value="Blues">Blues<option>
              <option value="Picnic">Picnic<option>
              <option value="Rainbow">Rainbow<option>
              <option value="Portland">Portland<option>
              <option value="Jet">Jet<option>
              <option value="Hot">Hot<option>
              <option value="Blackbody">Blackbody<option>
              <option value="Earth">Earth<option>
              <option value="Electric">Electric<option>
              <option value="Viridis">Viridis<option>
              <option value="Cividis">Cividis<option>
            </select>
          </div>
        </div>
        <gf-form-switch ng-if="ctrl.editor.trace.settings.color_option != 'solid'" class="gf-form" label="- Legend" label-class="gf-form-label width-7"
          checked="ctrl.editor.trace.settings.marker.showscale" on-change="ctrl.onConfigChanged()"></gf-form-switch>
      </div>
    </div>

    <div class="section gf-form-group" ng-if="ctrl.cfg.settings.mode !== 'markers'">
      <h5 class="section-heading">Lines</h5>
      <gf-form-switch 
        class="gf-form" 
        label="Show" 
        label-class="gf-form-label width-7"
        checked="ctrl.editor.trace.show.lines" 
        on-change="ctrl.onConfigChanged()"></gf-form-switch>

      <div ng-if="ctrl.editor.trace.show.lines">

        <div class="gf-form">
          <label class="gf-form-label width-7">Size</label>
          <input type="number" class="gf-form-input width-6" ng-model="ctrl.editor.trace.settings.line.width" spellcheck="false" placeholder="2"
            ng-blur="ctrl.onConfigChanged()" />
        </div>
        <div class="gf-form">
          <label class="gf-form-label width-7">Shape</label>
          <div class="gf-form-select-wrapper max-width-14">
            <select class="gf-form-input" ng-model="ctrl.editor.trace.settings.line.shape" ng-change="ctrl.onConfigChanged()">
              <option value="linear">linear</option>
              <option value="spline">spline</option>
              <option value="vhv">vhv</option>
              <option value="hvh">hvh</option>
              <option value="vh">vh</option>
              <option value="hv">hv</option>
            </select>
          </div>
        </div>
        <div class="gf-form">
          <label class="gf-form-label width-7">Dash</label>
          <div class="gf-form-select-wrapper max-width-14">
            <select class="gf-form-input" ng-model="ctrl.editor.trace.settings.line.dash" ng-change="ctrl.onConfigChanged()">
              <option value="solid">solid</option>
              <option value="dot">dot</option>
              <option value="dash">dash</option>
              <option value="longdash">longdash</option>
              <option value="dashdot">dashdot</option>
              <option value="longdashdot">longdashdot</option>
            </select>
          </div>
        </div>

        <div class="gf-form">
          <label class="gf-form-label width-7">Color</label>
          <input class="gf-form-input width-10"
            type="text" placeholder="#???"
            ng-model="ctrl.editor.trace.settings.line.color" 
            ng-blur="ctrl.onConfigChanged()"
          />
          <span class="gf-form-label">
            <spectrum-picker 
              ng-model="ctrl.editor.trace.settings.line.color" 
              ng-change="ctrl.onConfigChanged()" />
          </span>
        </div>
      </div>
    </div>

    <div class="section gf-form-group">
      <h5 class="section-heading">Text</h5>

      <div class="gf-form"
        ng-repeat="metric in ctrl.editor.getTextSegments()">
        <label class="gf-form-label width-7">Metric</label>
        <metric-segment 
          segment="metric" 
          get-options="ctrl.editor.getSeriesSegs(true)" 
          on-change="ctrl.editor.onTextMetricChanged()"></metric-segment>
      </div>
      
      <div class="gf-form" ng-if="ctrl.editor.trace.mapping.text">
        <label class="gf-form-label width-7">Show</label>
        <div class="gf-form-select-wrapper max-width-14">
          <select class="gf-form-input" ng-model="ctrl.editor.trace.settings.textposition" ng-change="ctrl.onConfigChanged()">
            <option value="">Hover</option>
            <option value="top">Top</option>
            <option value="bottom">Bottom</option>
          </select>
        </div>
      </div>

    </div>
  </div>
</div>

