<div class="container state_default state_{{ui.serverState}}">
  <header>
    <h1>
      Status: <span class="state_color">{{ ui.serverStateMessage }}</span>
      <i class="fa state_color state_icon" />
    </h1>
  </header>

  <div class="row metrics_wrapper">
    <div ng-repeat="(name, data) in ui.metrics">
      <status-page-metric name="{{name}}" data="data"></status-page-metric>
    </div>
  </div>

  <div class="row plugin_status_wrapper">
    <h3>Installed Plugins</h3>
    <div ng-if="!ui.statuses && ui.loading" class="loading_statuses">
      <span class="spinner"></span>
    </div>

    <h4 ng-if="!ui.statuses && !ui.loading" class="missing_statuses">
      No plugin status information available
    </h4>

    <table class="plugin_status_breakdown row" ng-if="ui.statuses">
      <tr>
        <th class="col-xs-1">Name</th>
        <th class="col-xs-11">Status</th>
      </tr>
      <tr ng-repeat="status in ui.statuses" class="status_row plugin_state_default plugin_state_{{status.state}}">
        <td class="col-xs-1 status_name">{{status.name}}</td>
        <td class="col-xs-11 status_message">
          <i class="fa plugin_state_color plugin_state_icon" />
          {{status.message}}
        </td>
      </tr>
    </table>
  </div>
</div>
