<div id="cluster-page">

    <section id="title-container">
      <div class="side-line"></div>
      <div class="title-box">
        <span class="vert-border-left"></span>
        <h1 id="cluster-headline" class="gui-headline-bold page-title">Cluster Management</h1>
        <span class="vert-border-right"></span>
      </div>
      <div class="side-line"></div>
      <div class="clear"></div>
    </section>

    <div id="add-node">
        {{#if standalone}}
          <h2 class="gui-headline">Join Node</h2>
          <span class="gui-text-flat italic">Type the name of a node in an existing cluster to join this node to.</span>
        {{else}}
          <h2 class="gui-headline">Add Node</h2>
          <span class="gui-text-flat italic">Type the name of a node to add to this cluster.</span>
        {{/if}}
        <table class="add-node-table">
            <tr class="no-highlight">
                <td id="add-node-box">
                    {{view RiakControl.JoinNodeView valueBinding="controller.joinNodeField"}}
                </td>
                <td class="button-column">
                    <a class="gui-point-button gui-text-bold right" {{action joinNode}}>
                      {{#if standalone}}
                        <span class="gui-button-msg">JOIN NODE</span>
                      {{else}}
                        <span class="gui-button-msg">ADD NODE</span>
                      {{/if}}
                    </a>
                </td>
            </tr>
        </table>
        {{#if errorMessage}}
            <div class="error-message">
                <a class="close-error gui-text" {{action hideError}}></a>
                <a class="error-text offline gui-text-flat">{{errorMessage}}</a>
            </div>
        {{/if}}
    </div><!-- #add-node -->


    <div id="current-area">
        <h2 class="gui-headline">
            Current Cluster
            <span id="total-number" class="gui-text-flat italic"></span><br/>
        </h2>
        <section id="node-list">
            {{#if controller.isLoading}}
                <div class="spinner-box">
                    <img id="cluster-spinner" class="spinner" src="/admin/ui/images/spinner.gif">
                    <h4 class="gui-headline-bold">Loading...</h4>
                </div>
            {{else}}
                <ul class="list-header">
                    <li class="item1"><h4 class="gui-headline-bold">Actions</h4></li>
                    <li class="item2"><h4 class="gui-headline-bold">Name &amp; Status</h4></li>
                    <li class="item3"><h4 class="gui-headline-bold">Partitions</h4></li>
                    <li class="item4"><h4 class="gui-headline-bold">RAM Usage</h4></li>
                </ul>
                <div class="clear"></div>
                {{collection RiakControl.CurrentClusterView contentBinding="activeCurrentCluster"}}
            {{/if}}
        </section>
    </div>


    <div id="area-separator">
        <div class="vert-line"></div>
    </div>


    <div id="planned-area">
        <h2 class="gui-headline">
            Staged Changes
            <span class="gui-text-flat italic">(Your new cluster after convergence.)</span>
        </h2>

        {{#if controller.displayPlan}}
            <section id="planned-list" class="">
                <ul class="list-header">
                    <li class="item1"><h4 class="gui-headline-bold">Name &amp; Status</h4></li>
                    <li class="item2"><h4 class="gui-headline-bold">Partitions</h4></li>
                    <li class="item3"><h4 class="gui-headline-bold">Action</h4></li>
                    <li class="item4"><h4 class="gui-headline-bold">Replacement</h4></li>
                </ul>
                <div class="clear"></div>
                {{collection RiakControl.StagedClusterView contentBinding="activeStagedCluster"}}
            </section>
            <div class="accept-plan">
                <div class="gui-checkbox-wrapper">
                    <label for="confirmed-check">This plan is correct.</label>
                    <input class="gui-checkbox" type="checkbox" name="confirmed" id="confirmed-check" value="accept"/>
                  </div>
                <a id="commit-button" class="gui-point-button-right gui-text-bold right" {{action commitPlan}}>
                    <span class="gui-button-msg">COMMIT</span>
                </a>
            </div>
            <div class="clear-plan-box">
                <span class="gui-text-flat serif">
                    Changed your mind? Click this button to remove all staged changes.
                </span>
                <a class="gui-rect-button gui-text-bold" {{action clearPlan}}>
                    <span class="gui-button-msg">CLEAR PLAN</span>
                </a>
            </div>
        {{else}}
            <section id="planned-list">
                <div class="spinner-box">
                    {{#if controller.ringNotReady}}
                        <h4 class="gui-headline-bold">
                            Please wait, the ring is converging.
                        </h4>
                    {{else}}
                        {{#if controller.legacyRing}}
                            <h4 class="gui-headline-bold">You are currently running a legacy version of Riak that does not support staged changes.</h4>
                        {{else}}
                            {{#if controller.emptyPlan}}
                                <h4 class="gui-headline-bold">Currently no staged changes to display.</h4>
                            {{else}}
                                {{#if controller.isLoading}}
                                    <img id="cluster-spinner" class="spinner" src="/admin/ui/images/spinner.gif">
                                    <h4 class="gui-headline-bold">Loading...</h4>
                                {{/if}}
                            {{/if}}
                        {{/if}}
                    {{/if}}
                </div>
            </section>
        {{/if}}
    </div>
    
    <div class="clear"></div>
    
</div>
