{% load i18n %}

<div class="form-group form-horizontal form-inline row" align="left">
  <label class="control-label" style="width:70px"
      for="plot_x">
    {% trans 'X axis'%}
  </label>
  <select id="plot_x" 
      class="form-control select-value-md" 
      ng-model="service.plot.values.x" 
      ng-change="service.plot.errors.x = null">
    <option value="{$ option.name $}"
        ng-repeat="option in service.plot.columns">
      {$ option.name $}
    </option>
  </select>
</div>


<!---------------- OPTIONS FOR Y1 ------------------->
<div class="form-group form-horizontal form-inline row" align="left">

  <label class="control-label" style="width:70px"
      for="plot_y">
    {% trans 'Y<sub>1</sub> axis'%}
  </label>

  <select class="form-control select-value-md" 
      id="plot_y" 
      ng-model="service.plot.values.y" 
      ng-change="service.plot.errors.y = null">
    <option value="{$ option.name $}"
        ng-repeat="option in service.plot.columns">
      {$ option.name $}
    </option>
  </select>

  <select class="form-control" id="plot_y_color"
      ng-model="service.plot.colors.y"
      ng-model-change=""
      ng-change="service.plot.errors.y = null"
      style="background-color: {$ service.plot.colors.y $}">
    <option value="{$ color.hex $}" 
        ng-repeat="color in service.plot.available_colors" 
        ng-style="{'background-color': '{$ color.hex $}'}">
      {$ color.name $}
    </option>
  </select>

  <select class="form-control" 
      id="plot_y_symbol"
      ng-model="service.plot.symbols.y"
      ng-model-change=""
      ng-change="service.plot.errors.y = null">
    <option value="{$ symbol $}" 
        ng-repeat="symbol in service.plot.available_symbols">
      {$ symbol $}
    </option>
  </select>
</div>

<!---------------- OPTIONS FOR Y2 ------------------->
<div class="form-group form-horizontal form-inline row" align="left">

  <label class="control-label" style="width:70px"
      for="plot_y2">
    {% trans 'Y<sub>2</sub> axis'%}
  </label>

  <select class="form-control select-value-md" 
      id="plot_y2" 
      ng-model="service.plot.values.y2" 
      ng-change="service.plot.errors.y2 = null">
    <option value="{$ option.name $}"
        ng-repeat="option in service.plot.columns">
      {$ option.name $}
    </option>
  </select>

  <select class="form-control" id="plot_y2_color"
      ng-model="service.plot.colors.y2"
      ng-model-change=""
      ng-change="service.plot.errors.y2 = null"
      style="background-color: {$ service.plot.colors.y2 $}">
    <option value="{$ color.hex $}" 
        ng-repeat="color in service.plot.available_colors" 
        ng-style="{'background-color': '{$ color.hex $}'}">
      {$ color.name $}
    </option>
  </select>

  <select class="form-control" 
      id="plot_y2_symbol"
      ng-model="service.plot.symbols.y2"
      ng-model-change=""
      ng-change="service.plot.errors.y2 = null">
    <option value="{$ symbol $}" 
        ng-repeat="symbol in service.plot.available_symbols">
      {$ symbol $}
    </option>
  </select>
</div>

<!---------------- OPTIONS FOR Y3 ------------------->
<div class="form-group form-horizontal form-inline row" align="left">

  <label class="control-label" style="width:70px"
      for="plot_y3">
    {% trans 'Y<sub>3</sub> axis'%}
  </label>

  <select class="form-control select-value-md" 
      id="plot_y3" 
      ng-model="service.plot.values.y3" 
      ng-change="service.plot.errors.y3 = null">
    <option value="{$ option.name $}"
        ng-repeat="option in service.plot.columns">
      {$ option.name $}
    </option>
  </select>

  <select class="form-control" id="plot_y3_color"
      ng-model="service.plot.colors.y3"
      ng-model-change=""
      ng-change="service.plot.errors.y3 = null"
      style="background-color: {$ service.plot.colors.y3 $}">
    <option value="{$ color.hex $}" 
        ng-repeat="color in service.plot.available_colors" 
        ng-style="{'background-color': '{$ color.hex $}'}">
      {$ color.name $}
    </option>
  </select>

  <select class="form-control" 
      id="plot_y3_symbol"
      ng-model="service.plot.symbols.y3"
      ng-model-change=""
      ng-change="service.plot.errors.y3 = null">
    <option value="{$ symbol $}" 
        ng-repeat="symbol in service.plot.available_symbols">
      {$ symbol $}
    </option>
  </select>
</div>



