<div ng-controller="stats" ng-init="init()">
  <style>
    table.stats-table th, table.stats-table td {
      text-align: right;
    }

    table.stats-table th:first-child,  table.stats-table td:first-child {
      text-align: left !important;
    }


  </style>

  <h1 ng-style="panel.style" style="text-align: center; line-height: .6em">{{data.value|formatstats:panel.format}} <small style="font-size: .5em; line-height: 0;">{{panel.unit}} ({{panel.mode}})</small></h1>
  <table ng-show="panel.display_breakdown == 'yes'" cellspacing="0" class="table-hover table table-condensed stats-table" style="margin-top: 38px;">
    <tbody>
      <thead>
        <tr>
         <th><a href="" ng-click="set_sort('label')" ng-class="{'icon-chevron-down': panel.sort_field == 'label' && panel.sort_reverse == true, 'icon-chevron-up': panel.sort_field == 'label' && panel.sort_reverse == false}"> {{panel.label_name}} </a></th>
         <th ng-repeat="stat in modes" ng-show="panel.show[stat]">
          <a href=""
            ng-click="set_sort(stat)"
            ng-class="{'icon-chevron-down': panel.sort_field == stat && panel.sort_reverse == true, 'icon-chevron-up': panel.sort_field == stat && panel.sort_reverse == false}">
            {{stat}}
          </a>
          </th>
        </tr>
      </thead>
      <tr ng-repeat="item in data.rows | orderBy:(panel.sort_field == 'label' ? 'label' : 'value.'+panel.sort_field):panel.sort_reverse">
        <td><i class="icon-circle" ng-style="{color:item.color}"></i> {{item.label}}</td>
        <td ng-repeat="stat in modes" ng-show="panel.show[stat]">{{item.value[stat]|formatstats:panel.format}} {{panel.unit}}</td>

        <!--<td style="text-align: right;">{{item.value|formatstats:panel.format}} {{panel.unit}}</td>-->
      </tr>
    </tbody>
  </table>
</div>
