<span ng-show="panel.legend.show"
      ng-class="{'pull-right': series.yaxis === 2, 'hidden-series': hiddenSeries[series.alias]}"
      ng-repeat='series in legend'
      class="histogram-legend">
    <i  class='icon-minus pointer'
        ng-style="{color: series.color}"
        bs-popover="'colorPopup.html'"
        >
    </i>
    <span class='small histogram-legend-item'>
      <a ng-click="toggleSeries(series)" data-unique="1" data-placement="{{series.yaxis === 2 ? 'bottomRight' : 'bottomLeft'}}">
        {{series.alias}}
      </a>
      <span ng-if="panel.legend.values">
        <span ng-show="panel.legend.current">
          &nbsp;&nbsp;Current:  {{series.current}}&nbsp;
        </span>
        <span ng-show="panel.legend.min">
          &nbsp;&nbsp;Min: {{series.min}}&nbsp;
        </span>
        <span ng-show="panel.legend.max">
          &nbsp;&nbsp;Max: {{series.max}}&nbsp;
        </span>
        <span ng-show="panel.legend.total">
          &nbsp;&nbsp;Total: {{series.total}}&nbsp;
        </span>
        <span ng-show="panel.legend.avg">
          &nbsp;&nbsp;Avg: {{series.avg}}&nbsp;
        </span>
      </span>
    </span>
</span>

<script type="text/ng-template" id="colorPopup.html">
  <div class="histogram-legend-popover">
    <a class="close" ng-click="dismiss();" href="">×</a>

    <div class="editor-row small" style="padding-bottom: 0;">
      <label>Axis:</label>
      <button ng-click="toggleYAxis(series)"
              class="btn btn-mini"
              ng-class="{'btn-success': series.yaxis === 1 }">
        Left
      </button>
      <button ng-click="toggleYAxis(series)"
              class="btn btn-mini"
              ng-class="{'btn-success': series.yaxis === 2 }">
        Right
      </button>
    </div>

    <div class="editor-row">
      <i ng-repeat="color in colors"
        class="pointer"
        ng-class="{'icon-circle-blank': color === series.color,'icon-circle': color !== series.color}"
        ng-style="{color:color}"
        ng-click="changeSeriesColor(series, color);dismiss();">
      </i>
    </div>
  </div>
</script>
