
<div id="snapshot-page">
  
  <section id="title-container">
    <div class="side-line"></div>
    <div class="title-box">
      <span class="vert-border-left"></span>
      <h1 id="snapshot-headline" class="gui-headline-bold page-title">Current Snapshot</h1>
      <span class="vert-border-right"></span>
    </div>
    <div class="side-line"></div>
    <div class="clear"></div>
  </section>
  <div class="relative health-info">
    {{#if healthyCluster}}
      <div id="healthy-cluster">
          <img id="health-indicator" src="/admin/ui/images/healthy-cluster.png" alt="" />
          <section>
            <h2 class="gui-headline-bold has-cut">Your cluster is healthy.</h2>
            <h3 class="">You currently have...</h3>
            <ul class="gui-text bulleted">
                <li><span class="emphasize monospace">0</span> Unreachable nodes</li>
                <li><span class="emphasize monospace">0</span> Incompatible nodes</li>
                <li><span class="emphasize monospace">0</span> Nodes marked as down</li>
                <li><span class="emphasize monospace">0</span> Nodes experiencing low memory</li>
                <li>Nothing to worry about because Riak is your friend</li>
            </ul>
          </section>
      </div>
    {{else}}
      <div id="unhealthy-cluster">
          <img id="health-indicator" src="/admin/ui/images/unhealthy-cluster.png" alt="" />
          <section>
            <h2 class="gui-headline-bold has-cut">Your cluster has problems.</h2>

            {{#if areUnreachableNodes}}
              <!-- Unreachable Nodes List -->
              <h3 id="unreachable-nodes-title" class="">The following nodes are currently unreachable:</h3>
              <ul id="unreachable-nodes-list" class="gui-text bulleted monospace">
                {{#each unreachableNodes}}
                  <li><a class="go-to-cluster" {{action showCluster href=true}}>{{name}}</a></li>
                {{/each}}
              </ul>
            {{/if}}

            {{#if areIncompatibleNodes}}
              <!-- Incompatible Nodes List -->
              <h3 id="incompatible-nodes-title" class="">Some
                information about the following nodes may be temporarily
                unavailable:</h3>
              <ul id="incompatible-nodes-list" class="gui-text bulleted monospace">
                {{#each incompatibleNodes}}
                  <li><a class="go-to-cluster" {{action showCluster href=true}}>{{name}}</a></li>
                {{/each}}
              </ul>
              <h4>This may be triggered by using control in the middle
                of a rolling upgrade or during startup of the node.</h4>
            {{/if}}

            {{#if areDownNodes}}
              <!-- Down Nodes List -->
              <h3 id="down-nodes-title" class="">The following nodes are currently marked down:</h3>
              <ul id="down-nodes-list" class="gui-text bulleted monospace">
                {{#each downNodes}}
                  <li><a class="go-to-cluster" {{action showCluster href=true}}>{{name}}</a></li>
                {{/each}}
              </ul>
            {{/if}}

            {{#if areLowMemNodes}}
              <!-- Low-Mem Nodes List -->
              <h3 id="low_mem-nodes-title" class="">The following nodes are currently experiencing low memory:</h3>
              <ul id="low_mem-nodes-list" class="gui-text bulleted monospace">
                {{#each lowMemNodes}}
                  <li><a class="go-to-cluster" {{action showCluster href=true}}>{{name}}</a></li>
                {{/each}}
              </ul>
            {{/if}}
          </section>
      </div>
    {{/if}}
  </div>
  
</div>
