<div class="legend-col-wrapper" ng-if="labels.length">
  <button
    type="button"
    ng-click="toggleLegend()"
    class="kuiCollapseButton legend-collapse-button"
  >
    <span class="kuiIcon {{getToggleLegendClasses()}}"></span>
  </button>
  <ul class="legend-ul" ng-show="open">

    <li
      ng-repeat="legendData in labels track by legendData.label"
      ng-mouseenter="highlight($event)"
      ng-mouseleave="unhighlight($event)"
      data-label="{{legendData.label}}"
      class="legend-value color"
    >

      <div class="legend-value-container">
        <div
          ng-click="showDetails = !showDetails"
          ng-class="showDetails ? 'legend-value-full' : 'legend-value-truncate'"
          class="legend-value-title"
          tooltip="{{legendData.label}}"
        >
          <i class="fa fa-circle" ng-style="{color: getColor(legendData.label)}"></i> {{legendData.label}}
        </div>

        <div ng-if="showDetails" class="legend-value-details">
          <div
            class="kuiButtonGroup kuiButtonGroup--united kuiButtonGroup--fullWidth"
            ng-show="canFilter(legendData)"
          >
            <button
              class="kuiButton kuiButton--basic kuiButton--small" ng-click="filter(legendData, false)"
            >
              <span class="kuiIcon fa-search-plus"></span>
            </button>

            <button
              class="kuiButton kuiButton--basic kuiButton--small" ng-click="filter(legendData, true)"
            >
              <span class="kuiIcon fa-search-minus"></span>
            </button>
          </div>

          <div class="legend-value-color-picker">
            <i ng-repeat="choice in colors"
              ng-click="setColor(legendData.label, choice)"
              ng-class="choice == getColor(legendData.label) ? 'fa-circle-o' : 'fa-circle'"
              ng-style="{color: choice}" class="fa dot"
            >
            </i>
          </div>

        </div>
      </div>

    </li>
  </ul>
</div>
