
<div class="controller-section" ng-controller="Health.HealthController">
  <div class="row-fluid">
    <p></p>
  </div>
  <div class="row-fluid">
    <input type="text" class="input span12" ng-model="pageFilter" placeholder="Filter...">
  </div>

  <div class="row-fluid">
    <div class="health-displays"
         ng-repeat="display in displays"
         ng-show="filterValues(display)"
         hawtio-auto-columns=".health-display">
      <div class="health-display-title">{{display.mbean}}</div>
      <div ng-show="mbeanStatus[display.mbean]">Status: {{mbeanStatus[display.mbean]}}</div>
      <div ng-show="display.values.length === 0">No displays to show...</div>
      <div ng-repeat="value in display.values"
           class="health-display {{value.level}}"
           ng-show="filterValues(value)"
           ng-init="showDetails = false">

        <div class="health-title centered"
             ng-bind-html-unsafe="getTitle(value)"></div>
        <div class="health-chart">
          <fs-donut bind="value.data"
                    color-map="value.colorMap"
                    outer-radius="200"
                    inner-radius="75"
                    duration="250"></fs-donut>
        </div>
        <div class="health-status" hawtio-message-panel="50%" speed="0.5s">
          <div class="health-message-wrap">
            <span class="health-message">{{value.message}}</span>
          </div>
        </div>
        <div class="health-details-toggle"
             ng-click="showDetails = !showDetails"
             title="Show detail panel">
          <i class="icon-info-sign clickable"></i>
          </div>
        <div class="health-details"
             hawtio-info-panel="left"
             speed="0.5s"
             toggle="showDetails">
          <div class="health-details-wrap">
            <table class="zebra-list">
              <body>
                <tr ng-repeat="(k, v) in sanitize(value) track by $index">
                  <td>{{k | humanize}}</td>
                  <td title="{{v}}">{{v}}</td>
                </tr>
              </body>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>
