{{#if nodes.length}}
  {{node-gauges nodes=nodes}}
  <div class="row">
    {{#each components as |c|}}
      <div class="col span-3">
        <div class="banner {{if c.healthy 'bg-success' 'bg-error'}}">
          <div class="banner-icon"><i class="icon icon-2x {{if c.healthy 'icon-check' 'icon-alert'}}" /></div>
          <div class="banner-message text-left"><p>{{c.name}}</p></div>
        </div>

      </div>
    {{/each}}
  </div>
  <div class="row">
    {{#each unhealthyComponents as |component|}}
      <div class="banner bg-error mt-30">
        <div class="banner-icon">
          <i class="icon icon-alert"></i>
        </div>
        <div class="banner-message text-left">
          <p>{{t 'clusterDashboard.alert.component' component=component.name}}</p>
        </div>
      </div>
    {{/each}}
    {{#each inactiveNodes as |node|}}
      <div class="banner bg-error mt-30">
        <div class="banner-icon">
          <i class="icon icon-alert"></i>
        </div>
        <div class="banner-message text-left">
          <p>{{t 'clusterDashboard.alert.node' node=node.displayName}}</p>
        </div>
      </div>
    {{/each}}
  </div>
{{else}}
  {{empty-table
    resource="container"
    showNew=scope.currentCluster.canAddNode
    newRoute="authenticated.cluster.nodes.templates"
    newTranslationKey="nodesPage.addNode"
    disabled=(rbac-prevents resource="machine" scope="global" permission="create")
    ctx=""
  }}
{{/if}}