{{#with view}}
    <div class="node">
        <div class="item1 toggle-container">
            {{#view RiakControl.CurrentClusterToggleView}}
                <div class="actions-toggle gui-field">
                    <a class="slider"></a>
                </div>
            {{/view}}
        </div>
        <div class="item2 name-box gui-text">
            <div {{bindAttr class="indicatorLights"}}>
            </div><div class="gui-text field-container inline-block">
                <div class="name gui-field">{{name}}</div>
            </div>
        </div>
        <div class="item3 gui-text ring-pct-box">
            <div {{bindAttr class="coloredArrows"}}></div>
            <div class="left gui-text pct-box">
                <span class="ring-pct">{{ringPctReadable}}%</span>
            </div>
            <div class="clear"></div>
        </div>
        <div class="item4 gui-text memory-box">
            {{#if available}}
                <div class="membar-bg">
                    <div class="mem-colors">
                        <div class="erlang-mem mem-color" {{bindAttr style="memErlangStyle"}} {{bindAttr name="memErlangCeil"}}></div>
                        <div class="non-erlang-mem mem-color" {{bindAttr style="memNonErlangStyle"}} {{bindAttr name="memNonErlang"}}></div>
                        <div class="unknown-mem" {{bindAttr style="memFreeStyle"}} {{bindAttr name="memFreeReadable"}}></div>
                    </div>
                    <div class="membar-fg"></div>
                </div>
                <span class="used-memory">{{memUsedReadable}}%</span>
            {{else}}
                <div class="membar-bg">
                    <div class="mem-colors">
                        <div class="unknown-mem" style="width: 100%"></div>
                    </div>
                    <div class="membar-fg"></div>
                </div>
                <span class="used-memory"></span>
            {{/if}}
        </div>
        <div class="clear"></div>

        <!-- Actions container -->
        <div class="actions-container">
            <div class="actions-pointer"></div>
            <div class="actions-box">
                <h4 class="gui-headline-bold">
                    Use these actions to prepare this node to leave the cluster.
                </h4>
                {{#if me}}
                    <span class="warning gui-text-flat italic">
                        Warning: This node is hosting Riak Control.  If it leaves the
                        cluster, Riak Control will be shut down.
                    </span>
                {{/if}}
                <div class="replacement-controls">
                    <div class="gui-radio-wrapper default">
                        <input class="gui-radio" type="radio" value="leave" {{bindAttr name="name" id="normalLeaveRadio"}} checked="checked"/>
                        <label class="serif" {{bindAttr for="normalLeaveRadio"}}>Allow this node to leave normally.</label>
                    </div>
                    <div class="gui-radio-wrapper">
                        <input class="gui-radio" type="radio" value="remove" {{bindAttr name="name" id="forceLeaveRadio"}} />
                        <label class="serif" {{bindAttr for="forceLeaveRadio"}}>Force this node to leave.</label>
                    </div>
                    <div {{bindAttr class="replaceRadioClasses"}}>
                        <input class="gui-radio" type="radio" value="replace" {{bindAttr name="name" id="replaceRadio"}} />
                        <label class="serif" {{bindAttr for="replaceRadio"}}>Choose a new node to replace this one.</label>
                    </div>
                    <div class="extra-actions">
                        <div class="right-angle-arrow"></div>
                        {{#if controller.joiningNodesExist}}
                            <div class="gui-dropdown-wrapper replacement-node-dropdown">
                                <div class="gui-dropdown-bg gui-text">Select Replacement Node</div>
                                <div class="gui-dropdown-cap left"></div>
                                {{view RiakControl.ClusterItemSelectView prompt="Select Replacement Node" classNames="gui-dropdown" contentBinding="controller.joiningNodes" optionLabelPath="content.name"}}
                            </div>
                            <div class="gui-checkbox-wrapper">
                                <input class="gui-checkbox" type="checkbox" {{bindAttr name="name" id="forceReplaceCheck"}} value="true" />
                                <label class="serif" {{bindAttr for="forceReplaceCheck"}}>Force this replacement?</label>
                            </div>
                            <div class="clear"></div>
                            <div class="disabler"></div>
                        {{else}}
                            <div class="no-joining-nodes gui-text-flat serif italic">
                                No new nodes are currently staged to join.
                            </div>
                            <div class="disabler show slide-up"></div>
                        {{/if}}
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="clear"></div>
                <span class="gui-text-flat serif italic stage-instructions">Click "STAGE" when you are ready to stage this action.</span>
                <a class="stage-button gui-point-button-right gui-text-bold right" {{action stageChange target="view"}}>
                    <span class="gui-button-msg">STAGE</span>
                </a>
                <div class="clear"></div>
            </div>
            <div class="clear"></div>
        </div><!-- .actions-box -->
        <div class="clear"></div>
    </div><!-- .node -->

{{/with}}
