<div ng-controller='terms' ng-init=“init()”>

<style>
  .pieLabel { pointer-events: none }
  .terms-legend-term {
    word-break: break-all;
  }

  .terms-remaining {
    bottom:0;
    top:0;
    background-color: #f00;
  }

  .terms-wrapper {
    display: table;
    width: 100%;
  }

  .terms-legend {
    display: table-row;
    height: 0;
  }

  .terms-legend {
    display: table-row;
  }
</style>

<div class="terms-wrapper">
  <!-- LEGEND -->
  <div class="terms-legend" ng-show="panel.counter_pos == 'above' && (panel.chart == 'bar' || panel.chart == 'pie')" id='{{$id}}-legend'>
    <!-- vertical legend above -->
    <table class="small" ng-show="panel.arrangement == 'vertical'">
      <tr ng-repeat="term in legend">
        <td><i class="icon-circle" ng-style="{color:term.color}"></i></td>
        <td class="terms-legend-term" style="padding-right:10px;padding-left:10px;">{{term.label}}</td>
        <td>{{term.data[0][1]}}</td>
      </tr>
    </table>

    <!-- horizontal legend above -->
    <span class="small" ng-show="panel.arrangement == 'horizontal'" ng-repeat="term in legend" style="float:left;padding-left: 10px;">
      <span>
        <i class="icon-circle" ng-style="{color:term.color}"></i>
        <span class="terms-legend-term">{{term.label}}</span> ({{term.data[0][1]}})
      </span>
    </span>

    <span class="small pull-left" ng-show="panel.tmode == 'terms_stats'">
      &nbsp | {{ panel.tstat }} of <strong>{{ panel.valuefield }}</strong>
    </span>

  </div>
  <!-- keep legend from over lapping -->
  <div style="clear:both"></div>

  <!-- CHART -->
  <div ng-show="panel.chart == 'pie' || panel.chart == 'bar'" terms-chart params="{{panel}}" style="position:relative" class="pointer terms-chart">
  </div>

  <!-- LEGEND -->
  <div class="terms-legend" ng-show="panel.counter_pos == 'below' && (panel.chart == 'bar' || panel.chart == 'pie')" id='{{$id}}-legend'>
    <!-- vertical legend below -->
    <table class="small" ng-show="panel.arrangement == 'vertical'">
      <tr ng-repeat="term in legend">
        <td><i class="icon-circle" ng-style="{color:term.color}"></i></i></td>
        <td class="terms-legend-term" style="padding-right:10px;padding-left:10px;">{{term.label}}</td>
        <td>{{term.data[0][1]}}</td>
      </tr>
    </table>

    <!-- horizontal legend below -->
    <span class="small" ng-show="panel.arrangement == 'horizontal'" ng-repeat="term in legend" style="float:left;padding-left: 10px;">
      <span>
        <i class="icon-circle" ng-style="{color:term.color}"></i>
        <span class="terms-legend-term">{{term.label}}</span> ({{term.data[0][1]}})
      </span>
    </span>

    <span class="small pull-left" ng-show="panel.tmode == 'terms_stats'">
      &nbsp | {{ panel.tstat }} of <strong>{{ panel.valuefield }}</strong>
    </span>

    <div style="clear:both"></div>
  </div>
  <!-- END Pie or Bar chart -->

<!-- TABLE -->
<table ng-style="panel.style" class="table table-striped table-condensed" ng-show="panel.chart == 'table'">
  <thead>
    <th>Term</th> <th>{{ panel.tmode == 'terms_stats' ? panel.tstat : 'Count' }}</th> <th>Action</th>
  </thead>
  <tr ng-repeat="term in data" ng-show="showMeta(term)">
    <td class="terms-legend-term">{{term.label}}</td>
    <td>{{term.data[0][1]}}</td>
    <td>
      <span ng-hide="term.meta == 'other'">
        <i class='icon-search pointer' ng-click="build_search(term)"></i>
        <i class='icon-ban-circle pointer' ng-click="build_search(term,true)"></i>
      </span>
    </td>
  </tr>
</table>

</div>