<!DOCTYPE html>
<!--[if IE 7 ]>    <html class="ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]-->
<head>
<title>Membase Console</title>
<link rel="stylesheet" type="text/css" href="/css/screen.css">
<link rel="stylesheet" type="text/css" href="/css/tabs.css">
<link rel="stylesheet" type="text/css" href="/css/print.css">
<link rel="stylesheet" type="text/css" href="/css/jquery-ui.membase.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1">
</head>
<body class="auth nojs">
  <script>document.body.className = "auth";</script>
  <div class="io-error-notice-wrapper"><span class="io-error-notice" style="display:none;"></span></div>
  <div id="container">
    <div class="page-header">
      <div class="cnt_holder main_holder">
        <div class="topper_nav">
          <a href="javascript:showAbout();">About</a>
          <i class="sign-out-link"><b>&bull;</b> <a href="javascript:ThePage.signOut();">Sign Out</a></i>
        </div>
        <a href="/index.html"><span>&nbsp;</span></a>
      </div>
    </div> <!-- header -->

    <div id="mainContainer" class="main_holder">
      <table width="100%">
        <tr>
          <td class="leftNav">
            <h1>MONITOR</h1>
            <ul>
              <!--<li class="line"></li>-->
              <li class="line"><a id="switch_overview" href="#visitSec=overview">Cluster Overview</a></li>
              <li class="line"><a id="switch_monitor_buckets" href="#visitSec=monitor_buckets">Data Buckets</a></li>
              <li class="line"><a id="switch_monitor_servers" href="#visitSec=monitor_servers">Server Nodes</a></li>
              <li class="line"><a id="switch_log" href="#visitSec=log">Log</a></li>
            </ul>

      <h1>MANAGE</h1>
      <ul>
        <li class="line"><a id="switch_buckets" href="#visitSec=buckets">Data Buckets</a></li>
        <li class="line"><a id="switch_servers" href="#visitSec=servers">Server Nodes</a></li>
        <li class="line" id="leftNav_updates_container"></li>
      </ul>
        <script id="leftNav_updates_template" type="text/html">
          <a href="#visitSec=notifications">
            Update Notifications
            {% if (enabled && newVersion!==false && newVersion!==undefined) { %}
            <span class="badge notify"><span>!</span></span>
            {% } %}
          </a>
        </script>

            <h1>SUPPORT</h1>
            <ul>
              <li class="line"><a id="switch_support_docs" href="http://techzone.couchbase.com/wiki/display/membase/Getting+Started" target="MCWebHelp">Documentation</a></li>
              <li class="line"><a id="switch_support_forums" href="http://techzone.couchbase.com/forums/membase/membase-server-17x/membase-server-17-developer-preview" target="nsforums">Support Forums</a></li>
            </ul>
          </td>
          <td id="mainPanel">

          <div id="monitor_servers" style="display:none">
            <!-- Shadow box -->
            <span class="staleness-notice">Difficulties communicating with the
            cluster; displaying cached information!</span>
            <div class="monitor-servers-subsection"><h1>Monitor Servers</h1>
              <div class="shadow_box">
                    <div class="content">
                      <div class="panes">
                          <div id="monitor_servers_container"></div>
                          <script id="monitor_servers_template" type="text/html">
                          <table class="lined_tab">
                            <col width="">
                            <tr>
                              <th></th>
                              <th>Server Node Name</th>
                              <th>Swap Usage</th>
                              <th>RAM Usage</th>
                              <th>CPU Usage</th>
                              <th>Active Items</th>
                              <th>Replica Items</th>
                            </tr>
                            <!-- {% $.each(rows, function () { %} -->
                            <tr>
                              <td class="{%= this.nodeClass %}"></td>
                              <td>
                                <a class="node_name disable-if-stale" href="#sec=analytics&statsHostname={%= h(this.hostname) %}">
                                {%= V.stripPortHTML(this.hostname, rows) %}
                                </a>
                              </td>
                              <td class="swap_usage">
                              <!-- {% if (this.systemStats.swap_total > 0) { %} -->
                                <div class="usage_smallest_info">
                                  <div class="usage_smallest">
                                      <div class="unused">
                                        <div class="used" style="width:1%;"></div>
                                      </div>
                                  </div>
                                  {%= V.setPercentBar(this.systemStats.swap_used / this.systemStats.swap_total * 100) %}
                                  {%= h(truncateTo3Digits(((this.systemStats.swap_used / this.systemStats.swap_total) || 0) * 100)) %}%
                                </div>
                              <!-- {% } else { %} -->
                              <span>N/A</span>
                              <!-- {% } %} -->
                              </td>

                              <td>
                                <div class="usage_smallest_info">
                                  <div class="usage_smallest">
                                      <div class="unused">
                                        <div class="used" style="width:1%;"></div>
                                      </div>
                                  </div>
                                  {%= V.setPercentBar((this.memoryTotal - this.memoryFree) / this.memoryTotal * 100) %}
                                  {%= h(truncateTo3Digits((this.memoryTotal - this.memoryFree) / this.memoryTotal * 100)) %}%
                                </div>
                              </td>

                              <td>
                                <div class="usage_smallest_info">
                                  <div class="usage_smallest">
                                      <div class="unused">
                                        <div class="used" style="width:1%;"></div>
                                      </div>
                                  </div>
                                  {%= V.setPercentBar(this.systemStats.cpu_utilization_rate || 0)  %}
                                  {%= h(truncateTo3Digits(Math.floor(this.systemStats.cpu_utilization_rate * 100) / 100)) %}%
                                </div>
                              </td>

                              <td>{%= V.formatQuantity(this.interestingStats.curr_items || 0, '', 1000, ' ') %}</td>
                              <td>{%= V.formatQuantity(this.interestingStats.vb_replica_curr_items || 0, '', 1000, ' ') %}</td>
                            </tr>
                            <!-- {% }); %} -->
                          </table>
                          </script>
                      </div>
                    </div>
              </div>
            </div>
            <!-- END shadow box -->
          </div>

          <div id="overview" style="display:none">
            <!-- shadow box -->
            <h1>CLUSTER OVERVIEW</h1>
            <div id="notice_container"></div>
            <div class="shadow_box">
                  <div class="content">
                    <div class="hdr">
                      <span class="staleness-notice">Difficulties communicating
                      with the cluster; displaying cached information!</span>Cluster</div>
                    <div class="section" id="overview_clusters_block">
                      <div class="item ram-item">
                        <div class="label">
                          <strong>RAM Overview</strong>
                        </div>
                        <div class="line_cnt"></div>
                      </div>
                      <div class="item disk-item">
                        <div class="label">
                          <strong>Disk Overview</strong>
                        </div>
                        <div class="line_cnt"></div>
                      </div>
                    </div>
                  </div>
            </div>
            <!-- END shadow box -->

            <div class="shadow_box">
                <div class="content">
                  <div class="hdr">
                    <span class="staleness-notice">Difficulties communicating
                    with the cluster; displaying cached information!</span>
                    Buckets <span>(<span class="buckets-number">??</span> active)</span>
                  </div>
                  <div class="section">
                    <div class="item">
                      <div class="graph_main">
                        <span class="graph_info_label">Operations per second</span>
                        <div id="overview_ops_graph" class="graph"></div>
                      </div>
                      <div class="graph_main">
                        <span class="graph_info_label">Disk fetches per second</span>
                        <div id="overview_reads_graph" class="graph"></div>
                      </div>
                      <div class="no_stats_marker">
                        <span class="with_buckets">Waiting for samples...</span>
                        <span class="without_buckets">No buckets currently defined! Go to <a href="#sec=buckets">Manage Buckets</a> to create some.</span>
                      </div>
                    </div>
                  </div>
                </div>
          </div>
          <div class="shadow_box">
                <div class="content">
                  <div class="hdr">
                    <span class="staleness-notice">Difficulties communicating with
                    the cluster; displaying cached information!</span>Servers
                  </div>
                  <div class="section" id="overview_servers_block">
                    <div class="item ovf">
                      <div class="actservers">
                        <h3>Active Servers: <span id="active-servers-count">??</span></h3>
                        <!-- <p>CPU Load Max: <b>98%</b></p> -->
                        <!-- <p>CPU Load Avg: <b>98%</b></p> -->
                        <!-- <p>CPU Load Min: <b>98%</b></p> -->
                        <!-- <a href="#">Monitor All Servers</a> -->
                      </div>
                      <ul>
                        <li class="fail">
                          <span class="when-non-zero">
                            <a href="#visitServersTab=pending">Servers Failed Over: <span class="failed-over-count">??</span></a>
                            <span class="badge"><span class="failed-over-count">??</span></span>
                          </span>
                          <span class="when-zero">Servers Failed Over: 0</span>
                        </li>
                        <li class="down">
                          <span class="when-non-zero">
                            <a href="#visitServersTab=active">Servers Down: <span class="down-count">??</span></a>
                            <span class="badge"><span class="down-count">??</span></span>
                          </span>
                          <span class="when-zero">Servers Down: 0</span>
                        </li>
                        <li class="pending">
                          <span class="when-non-zero">
                            <a href="#visitServersTab=pending">Servers Pending Rebalance: <span class="pending-count">??</span></a>
                            <span class="badge"><span class="pending-count">??</span></span>
                          </span><span class="when-zero">Servers Pending Rebalance: 0</span>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
          </div>
        </div>

          <div id="servers" style="display:none">
            <h1>SERVERS</h1>
            <div class="warning_message failover_warning">
              Fail Over Warning: <span class="warning-text"></span>
            </div>
            <div class="shadow_box">
                <div class="content">
                  <!-- shadow box -->
                  <div class="header_2 servers_header">
                    <span class="staleness-notice">Difficulties communicating with the cluster; displaying cached information!</span>
                    <a class="add_button btn_1"><span>Add Server</span></a>
                    <a class="rebalance_button btn_1"><span>Rebalance</span></a>
                    <a class="stop_rebalance_button btn_1"><span>Stop Rebalance</span></a>
                    <ul class="tabs switcher">
                      <li class="tab_left"><a href="#sec=servers&amp;serversTab=0">Active Servers</a></li>
                      <li class="tab_right" id="rebalance_tab">
                        <a href="#sec=servers&amp;serversTab=1">Pending Rebalance</a>
                        <span class="badge"><span>1</span></span>
                      </li>
                    </ul>
                  </div>
                  <div class="panes">
                    <div>
                      <div id="active_server_list_container" class="servers-not-rebalancing servers_list"></div>
                      <div id="rebalancing_list_container" class="servers-rebalancing"></div>
                    </div><div>
                      <div id="pending_server_list_container" class="servers_list"></div>
                    </div>
                  </div>
                </div>
            </div>
          </div>

          <script id="manage_server_list_template" type="text/html">
          <ul>
          <!-- {% if (!rows.length) { %} -->
            <li class="server_row rebalance_empty">
              <span class="rebalance_empty_message">There are no servers pending rebalance.</span>
            </li>
          <!-- {% } %} -->
          <!-- {% _.each(rows, function (s) { %} -->
            <!-- {% if (s.clusterMembership == 'inactiveAdded') { %}-->
            <li class="server_row pending_add {%= s.nodeClass %}">{%= V.setData('server', s) %}
              {% if (expandingAllowed) { %}<a class="serverName" href="#openServer={%= h(s.otpNode) %}">{%= V.stripPortHTML(s.hostname, rows) %}</a>
              {% } else { %}<span class="serverName">{%= V.stripPortHTML(s.hostname, rows) %}</span>{% } %}
              <a href="#" class="btn_cancel eject_server">Cancel</a>
              <span class="pending_add_message">Pending Add</span>
            </li>
            <!-- {% } else if (s.pendingEject) { %} -->
            <li class="server_row pending_removal {%= s.nodeClass %}">{%= V.setData('server', s) %}
              {% if (expandingAllowed) { %}<a class="serverName" href="#openServer={%= h(s.otpNode) %}">{%= V.stripPortHTML(s.hostname, rows) %}</a>
              {% } else { %}<span class="serverName">{%= V.stripPortHTML(s.hostname, rows) %}</span>{% } %}
              <a href="#" class="btn_cancel remove_from_list">Cancel</a>
              <span class="pending_removal_message">Pending Removal</span>
            </li>
            <!-- {% } else { %} -->
              <!-- {% if (s.reAddPossible) { %} -->
              <li class="add_back_row">{%= V.setData('server', s) %}
                <a href="#" class="add_back_btn re_add_button"></a>
                <span class="add_b_message">This server is now reachable. Do you
                want to add it back to the cluster on the next rebalance?</span>
              </li>
              <!-- {% } %} -->
            <li class="server_row {%= s.nodeClass %}">{%= V.setData('server', s) %}
              {% if (expandingAllowed) { %}<a href="#openServer={%= h(s.otpNode) %}" class="serverName">{%= V.stripPortHTML(s.hostname, rows) %}</a>{%
              } else { %}<span class="serverName">{%= V.stripPortHTML(s.hostname, rows) %}</span>{% } %}
              <a class="list_button btn_width_2 eject_server"><span>Remove Server</span></a>
              <a class="list_button btn_width_1 failover_server"><span>Fail Over</span></a>
              <span class="failed_over_message">Failed Over: Pending Removal</span>
            </li>
            <!-- {% } %} -->
            <!-- {% if (expandingAllowed) { %} -->
              <li class="settings-placeholder" style="display:none;">{%= ServersSection.renderServerDetails(s) %}</li>
            <!-- {% } %} -->
          <!-- {% }); %} -->
          </ul>
          </script>

          <script id="server_details_template" type="text/html">
          <div class="first gong_rb">
            <div class="pad">
              <a class="edit_btn float_right disabled">Edit</a>
              <table class="server_details_tab">
                <col width="230">
                <col width="">
                <tr>
                    <td>Server Name: <span>{%= h(hostname) %}</span></td>
                    <td>Uptime: <span>{%= h(formatUptime(uptime)) %}</span></td>
                </tr>
                <tr>
                    <td>OS: <span>{%= h(os) %}</span></td>
                    <td>Version: <span>{%= h(version) %}</span></td>
                </tr>
              </table>
            </div>
            <div class="side side_1"></div>
            <div class="side side_2"></div>
            <div class="side side_3"></div>
            <div class="side side_4"></div>
          </div>
          <div class="additional_server_info">
            <h3>Memory Cache</h3>
            <div class="info_block">
              <span class="dynamic_ram">Dynamic RAM:</span>
              <div class="usage-block">{%= V.thisElement(function (e) {ServersSection.renderUsage(e, obj.storageTotals.ram, true)}) %}</div>
            </div>
            <h3>Disk Storage</h3>
            <div class="info_block">
              <span class="disk_storage">Disk One:
                <span class="path">{%= h(storage.hdd[0].path) %}</span>
              </span>
              <div class="usage-block">{%= V.thisElement(function (e) {ServersSection.renderUsage(e, obj.storageTotals.hdd)}) %}</div>
            </div>
          </div><!-- additional_server_info -->
          </script>

          <script id="rebalancing_list_template" type="text/html">
          <ul class="servers_list rebalancing">
          <!-- {% _.each(rows, function (server) { %} -->
            <li class="server_row">
              <span class="usage_info">{%= h(server.percent) %}% Complete</span>
              <!-- width attribute of span that is set below is not working properly - needs to be fixed -->
              <span class="server_usage"><span style="width: {%= h(server.percent) %}%;"></span></span>
              <a href="javascript:;" class="serverName">{%= V.stripPortHTML(server.hostname, rows) %}</a>
            </li>
          <!-- {% }); %}-->
          </ul>
          </script>

          <div id="analytics" style="display:none">
            <span class="block nav float_right configure_view"></span>
            <h1>
              <span class="when-normal-stats">DATA BUCKETS: </span><span class="when-specific-stats"><em class="specific-stat-description"></em> for bucket: </span>
              <select id="analytics_buckets_select"></select>
              <span class="when-normal-stats"> on <select id="analytics_servers_select"></select></span>
            </h1>
            <div class="shadow_box">
                  <div class="content">
                    <div class="section">
                      <h2 class="header_2">
                        <span class="block nav float_right">
                          <span class="stats-period-container">
                            <span class="with_samples current">Last <b class="stats_visible_period">?</b></span><span class="without_samples current">No samples, yet</span>
                          </span>
                          <span class="staleness-notice">Difficulties communicating with the cluster; displaying cached information!</span>
                        </span>
                        <a id="zoom_minute">Minute</a> <a id="zoom_hour">Hour</a>
                        <a id="zoom_day">Day</a> <a id="zoom_week">Week</a>
                        <a id="zoom_month">Month</a> <a id="zoom_year">Year</a>
                      </h2>
                      <div class="analytics_graph_main">
                        <h2 class="current-graph-name"></h2>
                        <span class="graph_info_label block right active_node_count"><!-- 3 active nodes --></span>
                        <div id="analytics_main_graph_grid">
                          <div id="analytics_main_graph"></div>
                        </div>
                      </div>
                      <script id="new_stats_block_template" type="text/html">
                      {% _.each(blocks, function (blockInfo) { %}
                      <div id="{%= h(blockInfo.id) %}" class="darker_block graph_nav {%= blockInfo.extraCSSClasses %}">
                        {% if (!blockInfo.hideThis) { %}<h3 class="stats-block-expander"><ins></ins>{%= h(blockInfo.blockName) %}</h3>{% } %}
                        <div class="stats">
                        {% if (blockInfo.columns) { %}
                          <ul class="col_headers">
                          {% _.each(blockInfo.columns, function (columnName) { %}
                            <li>{%= h(columnName) %}</li>
                          {% }); %}
                          </ul>
                        {% } %}
                        {% _.each(blockInfo.stats, function (statInfo) {var name = statInfo.name; var title = statInfo.title; %}
                          <div id="{%= h(statInfo.id) %}" class="analytics-small-graph {%= (statInfo.missing ? 'dim' : '') %}" data-graph="{%=h(name)%}">
                            <div class="small_graph_block" style="width: 168px; height: 36px;"></div>
                            <span class="small_graph_label">
                              <span class="value">0</span><span class="label-text"> {%= h(title) %}</span>
                            </span>
                            <!-- <input type="checkbox" > -->
                            <ins class="right-arrow">
                              <ul>
                              </ul>
                            </ins>
                            {% if (statInfo.desc) { %}<div class="graph_tooltip"><span>{%= h(statInfo.desc) %}</span></div>{% } %}
                          </div>
                        {% }); %}
                          <div class="clear"></div>
                        </div>
                      </div>
                      {% }); %}
                      </script>
                      <div id="stats_container"></div>
                    </div>
                  </div>
            </div><!-- shadow_box -->
            <div class="shadow_box">
                  <div class="content">
                    <div class="section" id="top_keys_block">
                      <h2 class="header_2">
                      TOP KEYS
                      </h2>
                      <p id="top_keys_container"></p>
                      <script id="top_keys_template" type="text/html">
                      <table class="lined_tab">
                        <tr>
                          <th>Key</th>
                          <th>Ops/Sec</th>
                        </tr>
                        <!-- {% $.each(rows, function () { %} -->
                        <tr>
                          <td>{%= h(this.name) %}</td>
                          <td>{%= h(Math.round(this.ops * 100.0) / 100.0) %}</td>
                        </tr>
                        <!-- {% }); %} -->
                      </table>
                      </script>
                    </div> <!-- section -->
                  </div>
            </div> <!-- END shadow box -->
          </div>

          <div id="monitor_buckets" style="display:none;">
            <div class="no-buckets-subsection" style="display:none;">
              <div class="staleness-notice">Difficulties communicating with the cluster; displaying cached information!</div>
              No buckets currently defined! Go to <a href="#sec=buckets">Manage Buckets</a> to create some.
            </div>
            <div class="membase-buckets-subsection"><h1>Membase Buckets<span class="staleness-notice">Difficulties communicating with the cluster; displaying cached information!</span></h1>
              <div class="shadow_box">
                    <div class="content">
                      <div id="monitor_persistent_buckets_list_container"></div>
                      <script id="monitor_persistent_buckets_list_template" type="text/html">
                      <table class="lined_tab">
                        <col width="221">
                        <col width="135">
                        <col width="135">
                        <col width="135">
                        <col width="135">
                        <tr>
                          <th>Bucket Name</th>
                          <th>Ops/sec</th>
                          <th>Disk Fetches/sec</th>
                          <th>RAM Used</th>
                          <th>Item Count</th>
                        </tr>
                        <!-- {% $.each(rows, function () { %} -->
                        <tr>
                            <td>
                              <a class="disable-if-stale" href="#sec=analytics&statsBucket={%=h(this.uri)%}">{%= h(this.name) %}</a>
                            </td>
                            <td>{%= h(truncateTo3Digits(this.basicStats.opsPerSec)) %}</td>
                            <td>{%= h(truncateTo3Digits(this.basicStats.diskFetches)) %}</td>
                            <td>
                              <div class="usage_smallest_info">
                                  <div class="usage_smallest">
                                          <div class="unused">
                                              <div class="used" style="width:1%;"></div>
                                          </div>
                                  </div>{%= V.setPercentBar(this.basicStats.quotaPercentUsed) %}
                                  {%= h(truncateTo3Digits(Math.floor(this.basicStats.quotaPercentUsed * 100) / 100)) %}%
                              </div>
                            </td>
                            <td>{%= h(this.basicStats.itemCount) %}</td>
                          </tr>
                        <!-- {% }); %} -->
                      </table>
                      </script>
                    </div>
              </div>
            </div>
            <div class="memcached-buckets-subsection">
              <h1>Memcached Buckets<span class="staleness-notice">Difficulties communicating with the cluster; displaying cached information!</span></h1>
              <div class="shadow_box">
                    <div class="content">
                      <div id="monitor_cache_buckets_list_container"></div>
                      <script id="monitor_cache_buckets_list_template" type="text/html">
                      <table class="lined_tab">
                        <col width="221">
                        <col width="135">
                        <col width="135">
                        <col width="135">
                        <col width="135">
                        <tr>
                          <th>Bucket Name</th>
                          <th>Ops/sec</th>
                          <th>Hit ratio</th>
                          <th>RAM Used</th>
                          <th>Item Count</th>
                        </tr>
                        <!-- {% $.each(rows, function () { %} -->
                        <tr>
                          <td>
                            <a class="disable-if-stale" href="#sec=analytics&statsBucket={%=h(this.uri)%}">{%= h(this.name) %}</a>
                          </td>
                          <td>{%= h(truncateTo3Digits(this.basicStats.opsPerSec)) %}</td>
                          <td>{%= h(truncateTo3Digits(this.basicStats.hitRatio * 100)) %}%</td>
                          <td>
                            <div class="usage_smallest_info">
                              <div class="usage_smallest">
                                  <div class="unused">
                                    <div class="used" style="width:1%;"></div>
                                  </div>
                              </div>
                              {%= V.setPercentBar(this.basicStats.quotaPercentUsed) %}
                              {%= h(truncateTo3Digits(Math.floor(this.basicStats.quotaPercentUsed * 100) / 100)) %}%
                            </div>
                          </td>
                          <td>{%= h(this.basicStats.itemCount) %}</td>
                        </tr>
                        <!-- {% }); %} -->
                      </table>
                      </script>
                    </div>
              </div>
            </div>
          </div>

          <div id="buckets" style="display:none">
            <!-- shadow box -->
            <h1>Data Buckets</h1>
            <div class="shadow_box">
                  <div class="content">
                    <div class="darker_block" id="manage_buckets_top_bar">
                        <div class="pad_10 right buckets_action_bar clearfix">
                            <span class="staleness-notice">Difficulties communicating with the cluster; displaying cached information!</span>
                            <button class="button_200 create-bucket-button">Create New Data Bucket</button>
                        </div>
                    </div>
                    <div id="bucket_list_container"></div>
                  </div>
            </div>
            <!-- END shadow box -->

            <script id="bucket_list_template" type="text/html">
            <table class="buckets_tab">
              <col width="221">
              <col width="120">
              <col width="165">
              <col width="135">
              <col width="120">
              <tr>
                <th>Bucket Name</th>
                <th>Bucket Type</th>
                <th>Bucket Resides On</th>
                <th>RAM Usage/Quota</th>
                <th class="last">Disk Usage</th>
              </tr>
              <!-- {% $.each(rows, function () { %} -->
              <tr>
                <td colspan="6" class="bucket_info">
                  <table>
                  <tr>
                    <td class="bucket_name">
                      <span id="{%= h(this.name) %}_health" class="health_graph"></span>
                      <a class="disable-if-stale" href="#visitBucket={%=h(this.name)%}">{%= h(this.name) %}</a>
                    </td>
                    <td>{%= h(this.bucketTypeName) %}</td>
                    <td>{%= V.count(this.serversCount, 'server') %}</td>
                    <td>{%= V.formatQuantity(this.basicStats.memUsed) %}/{%= V.formatQuantity(this.quota.ram) %}</td>
                    <td>{%= V.formatQuantity(this.basicStats.diskUsed) %}</td>
                  </tr>
                  </table>
                  <div class="settings-placeholder">{%= BucketsSection.renderBucketDetails(this) %}</div>
                </td>
              </tr>
              <!-- {% }); %} -->
            </table>
            </script>
          </div>

          <script id="bucket_settings_template" type="text/html">
            <div class="gong_rb">
              <div class="pad">
                <a class="edit_btn" href="#editBucket={%= uri %}">Edit</a>
                <table class="bucket_properties_table">
                <col width="50%" />
                <col width="50%" />
                  <tr>
                    <td>
                    Bucket Name: <span>{%= h(name) %}</span><br />
                    Bucket Type: <span>{%= h(bucketTypeName) %}</span><br />
                    </td>
                    <td>
                    Access Control: <span>{%= (authType == 'none') ? 'Port' : ((name == 'default') ? 'None' : 'Authentication') %}{%= (authType == 'none') ? (': ' + proxyPort) : '' %}</span><br />
                  {% if (bucketType == 'membase') { %}
                    {% if (replicaNumber != 0) { %}
                      Replication: <span>{%= V.count(replicaNumber, 'replica copy') %}</span>
                    {% } else { %}
                      Replication: <span>disabled</span>
                    {% } %}
                  {% } %}
                    </td>
                  </tr>
                </table>
              </div>
              <div class="side side_1"></div>
              <div class="side side_2"></div>
              <div class="side side_3"></div>
              <div class="side side_4"></div>
            </div>

            <div class="additional_server_info bucket_details">
              <h2>Cache Size</h2>
              <div class="size-gauge for-ram"></div>
            {%= V.thisElement(function (e) {BucketsSection.renderRAMDetailsGauge(e, obj);}) %}
              <label class="for-hdd-quota">
                <span>Dynamic RAM Quota:</span>
                <span>{%= h(V.formatQuantity(ramQuota)) %}</span>
                <abbr></abbr>
              </label>

            {% if (storageInfoRelevant) { %}
              <h2>Storage Size</h2>
              <label class="for-hdd-quota">
                <span>Persistence Enabled:</span>
                <span>Yes</span>
                <abbr></abbr>
              </label>

              <div class="size-gauge for-hdd"></div>
            {%= V.thisElement(function (e) {BucketsSection.renderHDDDetailsGauge(e, obj)}) %}

              <label class="for-hdd-quota">
                <span>Disk Usage:</span>
                <span>{%= h(V.formatQuantity(basicStats.diskUsed)) %}</span>
                <abbr></abbr>
              </label>
            {% } %} <!-- storageInfoRelevant -->
            </div><!-- additional_server_info -->
          </script>

          <div id="alerts" style="display:none">
            <!-- Shadow box -->
            <span class="staleness-notice">Difficulties communicating with the cluster; displaying cached information!</span>
            <span class="block nav float_right configure_view">
              <a href="/diag" target="_blank">Generate Diagnostic Report</a>
            </span>
            <h1>Log</h1>
            <div class="shadow_box">
                  <div class="content">
                    <div class="panes">
                        <div id="alert_logs_container"></div>
                        <script id="alert_logs_template" type="text/html">
                        <table class="lined_tab">
                          <col width="">
                          <col width="">
                          <col width="">
                          <col width="160">
                          <tr>
                            <th>Event</th>
                            <th>Module Code</th>
                            <th>Server Node</th>
                            <th>Time</th>
                          </tr>
                          <!-- {% _.each(rows, function (logRow) { %} -->
                          <tr>
                            <td>{%= h(logRow.text).replace(/\n/g, "<br />") %}</td>
                            <td>{%= h(logRow.module) + (new String(1000 + parseInt(logRow.code))).slice(-3)%}</td>
                            <td>{%= h(logRow.node) %}</td>
                            <td class="text_11 nobr">{%=V.formatLogTStamp(logRow.tstamp)%}
                          </tr>
                          <!-- {% }); %} -->
                        </table>
                        </script>
                    </div>
                  </div>
            </div>
            <!-- END shadow box -->
          </div>

          <div id="notifications" style="display:none">
            <!-- shadow box -->
            <h1>Notifications</h1>
            <div class="shadow_box">
                  <div class="content">
                    <div class="hdr">Update Notifications</div>
                    <div class="section notifications-updates">
                      <div class="item" id="notifications_block_container">
                      Please wait...
                      </div>
                      <script id="notifications_block_template" type="text/html">
                      <p>You are running version {%= h(version) %}</p>
                      {% if (enabled===true) { %}
                        {% if (newVersion===undefined) { %}
                          <p class="warning"><strong>Warning</strong> &ndash; There
                        was a problem with retreiving the update information.</p>
                        {% } else if (newVersion===false) { %}
                          <p>No updates available.</p>
                        {% } else { %}
                          <p>A new version ({%= h(newVersion) %}) is available:</p>
                          <ul>
                            <li>
                              <a href="{%= h(links.release) %}">Release notes</a>
                            </li>
                            <li>
                              <a href="{%= h(links.download) %}">Download</a> the new version
                            </li>
                          </ul>
                          {% if (info!='') { %}
                            <p>{%= info %}</p>
                          {% } %}
                        {% } %}
                      {% } %}
                      <label class="for-enable-replication" for="notifications-updates">
                        {% if (enabled===true) { %}
                          <input type="checkbox" id="notification-updates" checked="checked">
                        {% } else { %}
                          <input type="checkbox" id="notification-updates">
                        {% } %}
                        <span>Enable software update notifications.</span>
                        <a href="#" class="more_info">What's this?</a>
                      </label>
                      <p class="more_info">
                      Enabling software update notifications allows notification in
                      the Membase web console when a new version of Membase Server
                      is available. Configuration information transferred in the
                      update check is anonymous and does not include any stored
                      key-value data.
                      </p>
                      </script>
                      <div class="save_cancel">
                        <button class="save_button float_right" type="button">Save</button>
                      </div>
                    </div>
                  </div>
            </div>
            <!-- END shadow box -->
          </div>

          <div id="coming" style="display:none">
            <h1>UI error encountered.  This content does not exist yet.</h1>
          </div>
            </td>
          </tr>
      </table>
    </div>
    <!-- mainContainer -->

    <div class="page-footer">
      <div class="main_holder">
      <h1>Copyright &copy; 2011 <a href="http://couchbase.com" target="_blank">Couchbase, Inc.</a> All rights reserved.</h1>
      </div>
    </div>
    </div>
    <!-- #container -->

<!-- dialogs -->
<div class="dialog bucket_details" id="bucket_details_dialog">
  <h1><span class="when-editing">Configure Bucket</span><span class="when-creating">Create Bucket</span></h1>
  <form><div class="clearfix">
    <h2>Bucket Settings</h2>
    <div class="bucket-icon"></div>
    <label class="for-name"><span>Bucket Name:</span><input disabled name="name" value="Bucket Name"><span class="error-container err-name"></span></label>
    <div class="for-bucket-type"><span>Bucket Type:</span>
     <label><input type="radio" name="bucketType" value="memcached"> Memcached</label>
     <label><input type="radio" name="bucketType" value="membase"> Membase</label>
    </div>
    <h2>Access Control</h2>
    <label class="for-sasl-password"><input id="bucket_details_sasl_selected" type="radio" name="authType" value="sasl" checked>
      <span><em class="when-default">Standard port (TCP port 11211. ASCII protocol or Binary auth-less)</em><em class="when-not-default">Standard port (TCP port 11211. Needs SASL auth.)</em></span>
    </label>
    <label class="for-sasl-password-input"><span>Enter password: </span><input type="password" name="saslPassword" disabled value=""></label>
    <label class="for-ascii"><input type="radio" name="authType" value="none"><span>Dedicated port (supports ASCII protocol and is auth-less)</span></label>
    <label class="for-proxy-port"><span>Protocol Port:</span><input name="proxyPort"><span class="error-container err-proxyPort"></span></label>
    <h2>Memory Size</h2>
    <div class="size-gauge for-ram">
      <div class="t">Cluster quota (<span class="total">192 Gb</span>)</div>
      <div class="gauge">
        <div>
          <div style="width: 68%;" class="green"></div>
          <div style="width: 33%;" class="blue"></div>
        </div>
      </div>
      <table class="b"><tr>
        <td class="blue">Other Buckets (<span class="other">15 Gb</span>)</td>
        <td class="green">This Bucket (<span class="this">5 Gb</span>)</td>
        <td>Free (<span class="free">12 Gb</span>)</td>
      </tr></table>
    </div>

    <label class="for-ram-quota"><span><em class="when-non-persistent">Per Node RAM Quota:</em><em class="when-persistent">Per Node RAM Quota:</em></span><input name="ramQuotaMB" value="30"><abbr>MB</abbr></label>
    <div class="error-container err-ramQuotaMB"></div>
    <em class="memcached-summary when-non-persistent"></em>
    <div class="persistent-only">
      <h2>Replication</h2>
      <label class="for-enable-replication"><input type="checkbox" checked><span>Enable Replication</span></label>
      <input class="hidden-replica-number" type="hidden" name="replicaNumber" value="0" disabled>
      <label class="for-replica-number">
        <select name="replicaNumber"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select>
        <span>Number of replica (backup) copies</span>
        <span class="error-container err-replicaNumber"></span>
      </label>
    </div> <!-- .persistent-only -->
  </div><div class="save_cancel clearfix">
    <span class="when-editing">
      <button class="save_button float_right" type="submit">Save</button>
      <button class="delete_button">Delete</button>
      <button class="flush_button">Flush</button>
    </span>
    <span class="when-creating"><button class="save_button float_right" type="submit">Create</button></span>
    <a class="close">Cancel</a>
  </div></form>
</div>

<div class="dialog" id="bucket_flush_dialog" title="Flushing">
  <form>
    <div class="clearfix">
      <div class="err">
        <p>Flushing this bucket will result in complete data loss for this bucket. <br/>Are you sure you want to flush it?</p>
      </div>
    </div>
    <div class="save_cancel clearfix">
      <button onclick="BucketsSection.flushCurrentBucket();" type="button" class="flush_button float_right">Flush</button>
      <a class="close">Cancel</a>
    </div>
  </form>
</div>

<div class="dialog" id="bucket_remove_dialog" title="Removing">
  <form>
    <div class="clearfix">
      <div class="err">
        <p>Removing this bucket will result in complete data loss for this bucket. <br/>Are you sure you want to remove it?</p>
      </div>
    </div>
    <div class="save_cancel clearfix">
      <button onclick="BucketsSection.removeCurrentBucket();" type="button" class="delete_button float_right">Delete</button>
      <a class="close">Cancel</a>
    </div>
  </form>
</div>

<div class="dialog" id="join_cluster_dialog" title="Add Server">
  <!-- Join cluster -->
  <div class="join_cluster">
    <div class="content">
      <div class="pad">
        <p class="warning pat_10" id="join_cluster_dialog_errors_container"></p>
        <script id="join_cluster_dialog_errors_template" type="text/html">
        <!-- {% _.each(rows, function (e) { %} -->
        <strong>Attention</strong> - {%= h(e) %}<br>
        <!-- {% }); %} -->
        </script>
        <form>
          <div class="clearfix">
            <div class="pas_20">
              <table>
                <tr>
                  <td>
                    <div class="u_line_sm">
                      <label class="label" for="add-server-hostname">Server IP Address*:</label>
                      <input type="text" class="inp" name="hostname" id="add-server-hostname" />
                      <a class="text_11 tooltip"><span>What's this?</span>
                        <span class="tooltip_msg"><span>
                          This is the hostname or IP address of a server node that you wish to add.
                        </span></span>
                      </a>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td class="th">
                    Security <a class="text_11 tooltip"><span>What's this?</span>
                      <span class="tooltip_msg"><span>
                        Enter the username and password for the node you want to add to this cluster.
                      </span></span>
                    </a>
                  </td>
                </tr>
                <tr>
                  <td>
                    <div class="u_line_sm">
                      <label class="label" for="user_inp">Username:</label>
                      <input type="text" class="inp" name="user" id="user_inp" />
                    </div>
                    <div class="u_line_sm">
                      <label class="label" for="password_inp">Password:</label>
                      <input type="password" class="inp" name="password" id="password_inp" />
                    </div>
                  </td>
                </tr>
              </table>
            </div>
          </div>
          <div class="save_cancel clearfix">
            <button type="submit" class="save_button float_right">Add Server</button>
            <a class="close">Cancel</a>
          </div>
        </form>
      </div>
    </div>
  </div>
  <!-- END join cluster -->
</div>
<!--  eject confirmation dialog -->
<div class="dialog" id="eject_confirmation_dialog" title="Confirm Server Removal">
  <div class="lbox type_2">
    <div class="content">
      <div class="pas_20">
        <div class="warning pat_20">
          <strong>Warning</strong> &ndash; Removing this server from the cluster will reduce cache capacity across all data buckets. Are you sure you want to remove this server?
        </div>
      </div>
      <div class="right save_cancel pas_20 footer_bg">
        <button type="submit" class="save_button float_right">Remove</button>
        <a class="close float_right">Cancel</a>
      </div>
    </div>
  </div>
</div>
<!-- END eject confirmation dialog -->
<!--  add confirmation dialog -->
<div class="dialog" id="add_confirmation_dialog" title="Confirm Server Addition">
    <div class="content">
      <div class="pas_20">
        <div class="warning pat_20">
          <strong>Warning</strong> &ndash; Adding a server to this cluster means all data on that server will be removed.
        </div>
      </div>
      <div class="right save_cancel pas_20 footer_bg">
          <button type="submit" class="save_button float_right">Add Server</button>
          <a class="close cancel_button float_right">Cancel</a>
      </div>
    </div>
</div>
<!-- END add confirmation dialog -->
<!--  add confirmation dialog -->
<div class="dialog" id="failover_confirmation_dialog" title="Confirm Node Fail Over">
  <div class="lbox type_2">
    <div class="content">
      <div class="pas_20">
        <div class="warning pat_20 warning_up_backfill">
          <strong>Attention</strong> – A significant amount of data stored on this node
          has not yet been replicated! Failing over the node now will
          irrecoverably lose that data when the incomplete replica is
          activated and this node is removed from the cluster. It is
          recommended to select "Remove Server" and rebalance to
          safely remove the node without any data loss.
          <label><input type="checkbox" name="confirmation"> Please confirm Failover.</label>
        </div>
        <div class="warning pat_20 warning_up_no_backfill">
          <strong>Warning</strong> – Failing over the node will remove it from the cluster and activate a replica.
          Operations currently in flight and not yet replicated, will be lost. Rebalancing will be required
          to add the node back into the cluster. Consider using "Remove from Cluster" and rebalancing instead of Failover,
          to avoid any loss of data. Please confirm Failover.
        </div>
        <div class="warning pat_20 warning_down_backfill">
          <strong>Attention</strong> – Not all data stored on this node has been
          replicated! Failing over the node now will irrecoverably
          lose that data when the incomplete replica is activated and
          this node is removed from the cluster. If the node might
          come back online, it is recommended to wait.
          Check this box if you want to failover the node, despite the resulting data loss
          <label><input type="checkbox" name="confirmation"> Please confirm Failover.</label>
        </div>
        <div class="warning pat_20 warning_down_no_backfill">
          <strong>Warning</strong> – Failing over the node will remove it from the cluster and activate a replica.
          Operations not replicated before the node became unresponsive, will be lost.
          Rebalancing will be required to add the node back into the cluster. Please confirm Failover.
        </div>
      </div>
        <div class="right save_cancel">
          <button type="submit" class="save_button float_right">Fail Over</button>
            <a class="close cancel_button float_right">Cancel</a>
        </div>
    </div>
  </div>
</div>
<!-- END add confirmation dialog -->
<!-- Leave cluster -->
<div class="dialog" id="generic_dialog">
  <div class="lbox">
    <div class="center">
      <div class="pad">
        <div class="pas_20">
          <div class="pat_10">
            <p class="dialog-text">Really eject this node from cluster?</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- </div> --> <!-- #container -->
<!-- About -->
<div class="dialog" id="about_server_dialog">
  <div class="lbox">
    <div class="config-top">
      <img src="images/membase-logo.png" alt="Membase Logo" />
      <h1>About Membase Server</h1>
    </div>
    <div class="center">
      <p class="dialog-text" id="about_versions"></p>
      <p class="dialog-text" id="cluster_state_id"></p>
      <ul>
        <li><a target="_blank" href="http://www.couchbase.com/">Get Support</a></li>
        <li><a target="MCWebHelp" href="http://techzone.couchbase.com/wiki/display/membase/Getting+Started">Documentation</a></li>
      </ul>
    </div>
    <div class="config-bottom">
      <button name="close" value="Close" class="submit close direction-button" id="about-close" type="submit">Close</button>
    </div>
  </div>
</div>
<!-- END about -->
<div class="auth_block" id="auth_dialog">
  <div class="page-header">
    <div class="cnt_holder main_holder">
      <div class="topper_nav">
          <a href="javascript:showAbout();">About</a>
          <i class="sign-out-link" style="display:none"><b>&bull;</b> <a href="javascript:ThePage.signOut();">Sign Out</a></i>
      </div>
      <a href="/index.html"><span> </span></a>
    </div>
  </div>
  <div class="pad">
    <div class="alert_red" id="auth_failed_message" style="display:none;">
      <div class="al_text">
        Login failed. Try again.
      </div>
    </div>
    <div class="alert_red" id="auth_inactivity_message" style="display:none;">
      <div class="al_text">
        The system has logged you out after 5 minutes of inactivity.
      </div>
    </div>
    <!-- <h1>Welcome</h1> TODO: CSS fixup needed here-->
    <h1>&nbsp;</h1>
    <form id="login_form" class="form block">
      <table>
        <col width="" />
        <col width="" />
        <tr>
          <td class="label"><label for="login_inp">Username:</label></td>
          <td><input type="text" name="login" id="login_inp" class="inp" /></td>
        </tr>
        <tr>
          <td class="label"><label for="password2_inp">Password:</label></td>
          <td>
            <input type="password" name="password" id="password2_inp" class="inp" />
          </td>
        </tr>
        <tr>
          <td class="label"></td>
          <td>
            <div class="right">
              <!-- <a href="#" class="forgot tdn">Forgot password?</a><br /> -->
              <div class="pat_10">
                <input type="submit" value="Sign In" class="submit" />
              </div>
            </div>
          </td>
        </tr>
      </table>
      <div class="spinner">
        <noscript style="color:#1F292E;text-shadow: 0px 1px 0px #a6b1b3;line-height: 2em;padding:5% 10%;display:block;">
        Your browser does not support JavaScript, or it is currently disabled. This application requires a browser with JavaScript enabled. Please, see the documentation for details.
        </noscript>
        <span>Loading...</span>
      </div>
    </form>
  </div>
  <div class="page-footer">
    <div class="main_holder">
      <h1>Copyright &copy; 2011 <a href="http://couchbase.com">Couchbase, Inc.</a> All rights reserved.</h1>
    </div>
  </div>
</div>
<!-- END auth_block -->
<div class="init_block" id="init_block">
  <div class="page-header">
    <div class="cnt_holder main_holder">
      <div class="topper_nav">
        <a href="javascript:showAbout();">About</a>
        <b>&bull;</b>
        <a target="MCWebHelp" href="http://techzone.couchbase.com/wiki/display/membase/Getting+Started">Help</a>
        <a style="display: none;" class="sign-out-link" href="javascript:ThePage.signOut();">Sign Out</a>
      </div>
    </div>
  </div>

  <div class="pad" id="init_welcome_dialog">
    <div class="pad-header">
      <div class="version" style="display:none;">Membase Server <span class="membase-version"></span></div>
      <div class="tagline">
        ELASTIC DATA MANAGEMENT
      </div>
      <div class="elastro-cling"></div>
    </div>
    <!-- screen S.1 -->
    <h1>Congratulations</h1>
    <form id="init_welcome_form">
      <p>
        You have successfully installed the Membase Server.<br>This wizard will help you configure your cluster.
      </p>
      <div class="pat_10">
        <input type="image" name="setup" value="Setup" class="submit next focusme" src="../images/welcome-setup-button.png" />
      </div>
    </form>
    <div class="welcome-footer">
      Copyright &copy; 2011 Couchbase, Inc. All Rights Reserved
      <a href="http://www.couchbase.com/company/contact" id="welcome-footer-contact" target="_blank">Contact</a> <a href="javascript:showAbout();">About</a>
    </div>
  </div>
  <!-- END welcome_block -->
  <div class="pad" id="init_cluster_dialog">
    <div class="config-top">
      <h1>Configure Server</h1>
      <h2>Step <span class="current-step">1</span> of 4</h2>
    </div>
    <h2 class="question">Configure Disk Storage</h2>
    <div class="disk_setup_block">
      <div><form><input type="submit" style="width:0px; height: 0px; visibility: hidden;">
        <label for="setup_path_input">Path:</label>
        <input type="text" name="path" id="setup_path_input" class="path-box" />
      </form></div>
      <div>
      <label>Free:</label>
        <span style="font-size:10pt; margin-left:5px; line-height: 25px;" class="total-size">---</span>
      </div>
      <span class="warning pat_10 init_cluster_dialog_errors_container" style="display:none;"></span>
    </div>
    <h2 class="question">Join Cluster / Start new Cluster</h2>
    <p class="pad_10">
    If you want to add this server to an existing Membase Cluster, select "Join a
    cluster now".
    Alternatively, you may create a new Membase Cluster by selecting "Start a new
    cluster".
    </p><p class="pad_10" style="padding-top: 5px;">
    If you start a new cluster the "Per Server RAM Quota" you set below will define
    the amount of RAM each server provides to the Membase Cluster. This value will
    be inherited by all servers subsequently joining the cluster and it cannot be
    modified in an existing cluster, so please set appropriately.
    </p>
    <form id="init_cluster_form" class="form block"><input type="submit" style="width:0px; height: 0px; visibility: hidden;">
      <div class="pat_10">
         <label>
           <input type="radio" name="join_cluster" id="no-join-cluster" checked />
           Start a new cluster.
         </label>
         <div class="memory-quota">
           <div>
             <label>RAM Available: <span class="ram-total-size"></span></label>
       </div>
       <div>
             <label style="width:auto;" for="init_dynamic_ram_quota">Per Server RAM Quota:</label>
             <input type="text" class="focusme" id="init_dynamic_ram_quota" name="dynamic-ram-quota" value="" />
             <span>
         MB (256 MB &mdash; <span class="ram-max-size"></span> MB)
             </span>
           </div>
         </div>
         <span class="warning pat_10" id="init_cluster_dialog_memory_errors_container" style="display:none;"></span>
      </div>
      <div class="pat_10">
        <label>
          <input type="radio" name="join_cluster" id="join-cluster" />
          Join a cluster now.
        </label>
        <div class="login-credentials">
          <div>
            <label for="clusterMemberHostIp">IP Address:</label>
            <input type="text" class="inp" name="hostname" id="clusterMemberHostIp" value="" />
            <br class="clear" />
          </div>
          <div>
            <label for="join_user_input">Username:</label>
            <input type="text" class="inp" name="user" id="join_user_input" value="Administrator" />
            <br class="clear" />
          </div>
          <div>
            <label for="join_password_input">Password:</label>
            <input type="password" class="inp" name="password" id="join_password_input" />
            <br class="clear" />
          </div>
          <p class="warning pat_10 join_cluster_dialog_errors_container"></p>
       </div>
      </div>
    </form>
    <div class="config-bottom">
      <button name="next" value="Next" class="submit next direction-button" id="step-2-next" type="submit">Next</button>
    </div>
    </div>
  <!-- END init_cluster_block -->
  <div class="pad" id="init_update_notifications_dialog">
    <div class="config-top">
      <h1>Notifications</h1>
      <h2>Step <span class="current-step">3</span> of 4</h2>
    </div>
    <h2 class="question">Update Notifications</h2>
    <p class="pad_10">
      <label for="init-notifications-updates-enabled">
        <input type="checkbox" id="init-notifications-updates-enabled" checked="checked">
        <span>Enable software update notifications</span>
      </label>
      <a href="#" class="more_info">What's this?</a>
    </p>
    <p class="more_info pad_10">
      Enabling software update notifications allows notification in the Membase web console when a new version of Membase Server is available. Configuration information transferred in the update check is anonymous and does not include any stored key-value data.
    </p>
    <h2 class="question">Community Updates</h2>
    <p class="pad_10">Please provide your email address to join the community and receive news on coming events.</p>
    <p class="pad_10">
      <label for="init-join-community-email">
        <span>Email:</span>
        <input id="init-join-community-email">
        <span class="error-container err-name"></span>
      </label>
    </p>
    <div class="config-bottom">
      <button name="next" value="Next" class="submit next direction-button" id="step-3-next" type="submit">Next</button>
      <button name="back" value="Back" class="submit back direction-button" id="step-3-back" type="button">Back</button>
    </div>
  </div>
  <!-- END init_update_notifications_block-->
  <div class="pad" id="init_secure_dialog">
   <div class="config-top">
      <h1>Configure Server</h1>
      <h2>Step <span class="current-step">4</span> of 4</h2>
    </div>
    <div class="alert_red" id="init_secure_failed_message" style="display:none;">
      <div class="al_text">
        Could not secure the server because of bad input.
      </div>
    </div>
    <h2 class="title">Secure this Server</h2>
    <p class="pad_10">
      Please create an administrator account for this Server. If you want to join other
      servers to this one to form a cluster, you will need to use these administrator
      credentials in the "join cluster" process.
    </p>
    <form id="init_secure_form" class="form block" action="/settings/web">
      <input type="text" name="port"
            style="display:none;" value="SAME"/>
      <div class="warn">
        <ul></ul>
      </div>
      <div class="username-input">
        <label for="secure-username">Username:</label>
        <input type="text" name="username" class="inp" value="Administrator" id="secure-username" maxlength="24" />
      </div>
      <div class="password-input">
        <label for="secure-password">Password:</label>
        <input type="password" name="password" class="inp focusme" id="secure-password" maxlength="24" />
      </div>
      <div class="password-input-verify">
        <label for="secure-password">Verify Password:</label>
        <input type="password" name="password" class="inp" id="secure-password-verify" maxlength="24" />
      </div>
      <!--button type="submit" style="display:none;"></button-->
    <div class="config-bottom">
      <button name="finish" value="Finish" class="submit finish direction-button" id="step-4-finish" type="submit">Next</button>
      <button name="back" value="Back" class="submit back direction-button" id="step-4-back" type="button">Back</button>
    </div>
    </form>
  </div>
  <!-- END init_secure_block -->

  <div class="pad bucket_details" id="init_bucket_dialog">
    <div class="config-top">
      <h1>Create Default Bucket</h1>
      <h2>Step <span class="current-step">2</span> of 4</h2>
    </div>
    <form><div class="clearfix">
      <h2>Bucket Settings</h2>
      <div class="bucket-icon"></div>
      <label class="for-name"><span>Bucket Name:</span> default</label>
      <div class="for-bucket-type"><span>Bucket Type:</span>
       <label><input type="radio" name="bucketType" value="memcached"> Memcached</label>
       <label><input type="radio" name="bucketType" value="membase"> Membase</label>
      </div>
      <h2>Memory Size</h2>
      <div class="size-gauge for-ram">
        <div class="t">Cluster quota (<span class="total">192 Gb</span>)</div>
        <div class="gauge">
          <div>
            <div style="width: 68%;" class="green"></div>
            <div style="width: 33%;" class="blue"></div>
          </div>
        </div>
        <table class="b"><tr>
          <!-- <td class="blue" style="display:none;">Other Buckets (<span class="other">15 Gb</span>)</td> -->
          <td class="green">This Bucket (<span class="this">5 Gb</span>)</td>
          <td>Free (<span class="free">12 Gb</span>)</td>
        </tr></table>
      </div>
            <label class="for-ram-quota"><span><em class="when-non-persistent">Per Node RAM Quota:</em><em class="when-persistent">Per Node RAM Quota:</em></span><input name="ramQuotaMB" class="focusme" value="30"><abbr>MB</abbr></label>
      <div class="error-container err-ramQuotaMB"></div>
            <em class="memcached-summary when-non-persistent"></em>
      <div class="persistent-only">
        <h2>Replication</h2>
              <label class="for-enable-replication"><input type="checkbox" checked disabled><span>Enable Replication</span></label>
              <input class="hidden-replica-number" type="hidden" name="replicaNumber" value="0" disabled>
        <label class="for-replica-number">
                <select name="replicaNumber"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select>
          <span>Number of replica (backup) copies</span>
          <span class="error-container err-replicaNumber"></span>
        </label>
      </div><!-- .persistent-only -->
    </div><div class="config-bottom clearfix">
    <button name="finish" class="submit finish direction-button" type="submit">Next</button>
    <button name="back" class="submit back direction-button" id="step-init-bucket-back" type="button">Back</button>
    </div></form>
  </div>
  <!-- END init_bucket_block -->

  <div class="page-footer">
    <div class="main_holder">
      <h1>Copyright &copy; 2011 <a href="http://couchbase.com">Couchbase, Inc.</a> All rights reserved.</h1>
    </div>
  </div>
</div>
<!-- END init_block -->
<script id="notice_template" type="text/html">
<div class="shadow_box notice">
  <div class="content">
    <h2 class="header_2">Membase Server Message<span style="float: right; color: black; font-size: 13px;">click to dismiss</span></h2>
    <div class="pad_10 success_msg">
      <p class="info_text">{%= h(text) %}</p>
    </div>
  </div>
</div>
</script>
<script id="noticeErr_template" type="text/html">
<div class="shadow_box notice">
  <div class="content">
    <h2 class="header_2">Membase Server Alert<span style="float: right; color: black; font-size: 13px;">click to dismiss</span></h2>
    <div class="pad_10 error_msg">
      <p class="info_text">{%= h(text) %}</p>
    </div>
  </div>
</div>
</script>

<div class="popup_2"></div>

<!--[if IE]><script language="javascript" type="text/javascript" src="/js/excanvas.min.js"></script><![endif]-->
<script src="/js/jquery.js"></script>
<script src="/js/jquery-ui-1.8.10.custom.js"></script>
<script src="/js/jquery.flot.js"></script>
<script src="/js/jquery.sparkline.js"></script>
<script src="/js/jquery.ba-bbq.js"></script>
<!--[if lt IE 9]>
<script src="/js/json2.js"></script>
<script>
$(window).bind('template:rendered', function () {
  $('table.lined_tab').each(function () {
    $(this).find('tr:has(td):odd').addClass('highlight');
  });
});
</script>
<![endif]-->
<script src="/js/underscore.js"></script>
<script src="/js/tools.tabs.js"></script>
<script src="/js/jquery.cookie.js"></script>
<script src="/js/misc.js"></script>
<script src="/js/base64.js"></script>
<script src="/js/cells.js"></script>
<script src="/js/app-ui-misc.js"></script>
<script src="/js/app-misc.js"></script>
<script src="/js/core-data.js"></script>
<script src="/js/analytics.js"></script>
<script src="/js/servers.js"></script>
<script src="/js/settings.js"></script>
<script src="/js/buckets.js"></script>
<script src="/js/overview.js"></script>
<script src="/js/all-images.js"></script>
<script src="/js/updates-notifications.js"></script>
<script src="/js/app.js"></script>
</body>
</html>
