<!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>Couchbase Console</title>
  <link rel="stylesheet" type="text/css" href="css/codemirror.css">
  <link rel="stylesheet" type="text/css" href="css/screen.css">
  <link rel="stylesheet" type="text/css" href="css/print.css">
  <link rel="stylesheet" type="text/css" href="css/jquery-ui.couchbase.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 id="switch_support_docs" href="http://docs.couchbase.org/couchbase-manual-2.0/couchbase-getting-started.html" target="cbdocs">Documentation</a>
          <b>&bull;</b> <a id="switch_support_forums" href="http://www.couchbase.org/forums/couchbase/couchbase-server-20-developer-preview" target="cbforums">Support Forums</a>
          <b>&bull;</b> <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 class="logo">&nbsp;</span></a>
        <div id="global_progress" class="closed disable_toggle">
          <i class="toggle">i</i>
          <ul id="global_progress_container"></ul>
        </div>
      </div>
    </div><!-- .page-header -->

    <div id="headerNav">
      <div class="contents">
        <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_servers" href="#visitSec=servers">Server Nodes</a></li>
          <li class="line"><a id="switch_buckets" href="#visitSec=buckets">Data Buckets</a></li>
          <li class="line"><a id="switch_views" href="#visitSec=views">Views</a></li>
          <li class="line" style="display:none"><a id="switch_replications" href="#visitSec=replications">Replications</a></li>
          <li class="line"><a id="switch_log" href="#visitSec=log">Log</a></li>
          <li class="line" id="nav_settings_container"></li>
        </ul>
        <script id="nav_settings_template" type="text/html">
        <a href="#visitSec=settings" id="switch_settings">Settings
        {% if (enabled && newVersion!==false && newVersion!==undefined) { %}
        <span class="badge notify"><span>!</span></span>
        {% } %}</a>
        </script>
      </div>
    </div><!-- #headerNav -->

    <div id="mainContainer" class="main_holder">
      <div id="mainPanel">

        <div id="overview" style="display:none">
          <h1>Cluster Overview</h1>
          <div id="notice_container"></div>
          <div class="shadow_box">
            <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 class="shadow_box">
            <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 class="shadow_box">
            <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 id="servers" style="display:none">
          <h1>Servers</h1>
          <div class="warning_message failover_warning">
            Fail Over Warning: <span class="warning-text"></span>
          </div>
          <div id="auto_failover_count_container" class="warning_message" style="display:none;">
            A server was automatically failovered
            <a class="auto_failover_count_reset edit_btn">
              <span>Reset Quota</span>
            </a>
          </div>
          <div class="shadow_box">
            <div class="header_2">
              <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">
                <li class="tab_left"><a>Active Servers</a></li>
                <li class="tab_right" id="rebalance_tab">
                  <a>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_list"></div>
              </div><div>
                <div id="pending_server_list_container" class="servers_list"></div>
              </div>
            </div>
          </div>
          <script id="manage_server_list_template" type="text/html">
          <table class="list" style="width:100%">
            <tr>
              <th class="node_name">Server Node Name</th>
              <th></th>
              <th style="text-align:left">RAM Usage</th>
              <th style="text-align:left">Swap Usage</th>
              <th style="text-align:left">CPU Usage</th>
              <th colspan="2" style="text-align:left">Items (Active / Replica)</th>
            </tr>
          <!-- {% if (!rows.length) { %} -->
            <tr class="server_row rebalance_empty">
              <td colspan="7">There are no servers pending rebalance.</td>
            </tr>
          <!-- {% } %} -->
          <!-- {% _.each(rows, function (s) { %} -->
            <!-- {% if (s.clusterMembership == 'inactiveAdded') { %}-->
            <tr class="server_row pending_add {%= s.nodeClass %}">
              <td class="node_name">{%= V.setData('server', s) %}
              {%= V.stripPortHTML(s.hostname, rows) %}
              </td>
              <td colspan="5">

              </td>
              <td>
              <a href="#" class="list_button btn_cancel eject_server"><span>Cancel</span></a>
              <span class="pending_add_message">Pending Add</span>
              </td>
            </tr>
            <!-- {% } else if (s.pendingEject) { %} -->
            <tr class="server_row pending_removal {%= s.nodeClass %}">
              <td class="node_name">{%= V.setData('server', s) %}
              <a class="{% if (!expandingAllowed) { %} disabled"{% } else { %}" href="#openServer={%= h(s.otpNode) %}"{% } %}><span class="expander closed"></span></a>
              {%= V.stripPortHTML(s.hostname, rows) %}
              </td>
              <td colspan="5">
              <span class="pending_removal_message">Pending Removal</span>
              </td>
              <td>
              <a href="#" class="list_button btn_cancel remove_from_list"><span>Cancel</span></a>
              </td>
            </tr>
            <!-- {% } else { %} -->
              <!-- {% if (s.reAddPossible) { %} -->
              <tr class="add_back_row">
                <td colspan="7">{%= 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>
                </td>
              </tr>
              <!-- {% } %} -->

              <tr class="server_row {%= s.nodeClass %}" id="{%= h(s.otpNode.replace('@', '-')) %}">
                <td class="node_name">{%= V.setData('server', s) %}
              <!-- {% if (s.reAddPossible) { %} -->
                  <a href="#openServer={%= h(s.otpNode) %}"><ins class="expander closed"></ins></a>
                  {%= V.stripPortHTML(s.hostname, rows) %}
              <!-- {% } else { %} -->
                  <a class="{% if (!expandingAllowed) { %} disabled"{% } else { %}" href="#openServer={%= h(s.otpNode) %}"{% } %} title="Show Server Node info"><ins class="expander closed"></ins></a>
                  <a href="#sec=analytics&statsHostname={%= h(s.hostname) %}" title="View Analytics for {%= h(s.hostname) %}">{%= V.stripPortHTML(s.hostname, rows) %}</a>
              <!-- {% } %} -->
                </td>
                <td class="{%= s.nodeClass %}"></td>
                <td class="ram">
                  <div class="vertical_bar">
                    <div class="used" style="height:{%= (s.memoryTotal - s.memoryFree) / s.memoryTotal * 100 %}%;top:{%= 105 - ((s.memoryTotal - s.memoryFree) / s.memoryTotal * 100) %}%"></div>
                  </div>
                  <div class="wrap">{%= h(truncateTo3Digits((s.memoryTotal - s.memoryFree) / s.memoryTotal * 100)) %}%</div>
                </td>
                <td class="ram">
                  <!-- {% if (s.systemStats.swap_total > 0) { %} -->
                  <div class="vertical_bar">
                    <div class="used" style="height:{%= s.systemStats.swap_used / s.systemStats.swap_total * 100 %}%;top:{%= 105 - (s.systemStats.swap_used / s.systemStats.swap_total * 100) %}%"></div>
                  </div>
                  <div class="wrap"> {%= h(truncateTo3Digits(((s.systemStats.swap_used / s.systemStats.swap_total) || 0) * 100)) %}%</div>
                  <!-- {% } else { %} -->
                  <span>N/A</span>
                  <!-- {% } %} -->
                </td>

                <td class="ram">
                  <div class="vertical_bar">
                    <div class="used" style="height:{%= Math.floor(s.systemStats.cpu_utilization_rate * 100) / 100 %}%;top:{%= 105 - (Math.floor(s.systemStats.cpu_utilization_rate * 100) / 100) %}%"></div>
                  </div>
                  <div class="wrap">{%= h(truncateTo3Digits(Math.floor(s.systemStats.cpu_utilization_rate * 100) / 100)) %}%</div>
                </td>

                <td class="rep">
                  {%= V.formatQuantity(s.interestingStats.curr_items || 0, '', 1000, ' ') %}/
                  {%= V.formatQuantity(s.interestingStats.vb_replica_curr_items || 0, '', 1000, ' ') %}
                </td>
                <td class="actions">
                  <a class="list_button eject_server"><span>Remove</span></a>
                  <a class="list_button failover_server"><span>Fail Over</span></a>
                  <span class="failed_over_message">Failed Over: Pending Removal</span>
                </td>
              </tr>
            <!-- {% } %} -->
            <!-- {% if (expandingAllowed) { %} -->
              <tr><td colspan="9" class="settings-placeholder" style="display:none;">{%= ServersSection.renderServerDetails(s) %}</td></tr>
            <!-- {% } %} -->
          <!-- {% }); %} -->
          </table>
          </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="properties_table">
                <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(DAL.prettyVersion(version, true)) %}</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>
        </div>

        <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 id="date_slider_container">
            <div id="date_slider"></div>
            <ul>
              <li><a id="zoom_minute">Minute</a></li>
              <li><a id="zoom_hour">Hour</a></li>
              <li><a id="zoom_day">Day</a></li>
              <li><a id="zoom_week">Week</a></li>
              <li><a id="zoom_month">Month</a></li>
              <li><a id="zoom_year">Year</a></li>
            </ul>
          </div>
          <div id="current_stat_info">
            <h3>
              <span class="i">i</span>
              <span class="current-graph-name"><!-- stat name --></span>
            </h3>
            <p class="current-graph-desc"><!-- stat description --></p>
          </div>
          <div class="shadow_box" style="width:780px;">
            <div class="section">
              <div 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>
                General Bucket Analytics
                <!--<ul class="tabs">
                  <li class="tab_left"><a id="general_analytics">General</a></li>
                  <li><a id="view_index_analytics">View &amp; Index</a></li>
                  <li class="tab_right"><a id="replication_analytics">Replication</a></li>
                </ul>-->
              </div>
              <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 {%= blockInfo.extraCSSClasses %}">
                        {% if (!blockInfo.hideThis) { %}<h3 class="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><!-- shadow_box -->
          <div class="shadow_box" style="width:780px;">
            <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 style="max-width:600px;word-wrap:break-word">{%= h(this.name) %}</td>
                          <td>{%= h(Math.round(this.ops * 100.0) / 100.0) %}</td>
                        </tr>
                        <!-- {% }); %} -->
                      </table>
              </script>
            </div> <!-- section -->
          </div> <!-- END shadow box -->
        </div>

        <div id="buckets" style="display:none">
          <h1>Data Buckets</h1>
          <div class="shadow_box" id="couchbase_buckets">
            <div id="manage_buckets_top_bar" class="header_2">
              <h4 style="float:left">Couchbase Buckets</h4>
              <div class="right">
                <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 class="shadow_box" id="memcached_buckets" style="display:none">
            <div id="manage_buckets_top_bar" class="header_2">
              <h4 style="float:left">Memcached Buckets</h4>
              <div class="right">
                <span class="staleness-notice">Difficulties communicating with the cluster; displaying cached information!</span>
              </div>
            </div>
            <div id="memcached_bucket_list_container"></div>
          </div>

          <script id="bucket_list_template" type="text/html">
            <table class="list" width="100%">
              <tr>
                <th class="bucket_name">Bucket Name</th>
                <th>Nodes</th>
                <th>Item Count</th>
                <th>Ops/sec</th>
                <th class="disk_fetch">Disk Fetches/sec</th>
                <th class="hit_ratio">Hit Ratio</th>
                <th>RAM Usage/Quota</th>
                <th>Disk Usage</th>
                <th class="last"></th>
              </tr>
              <!-- {% if (!rows.length) { %} -->
              <tr><td colspan="10" style="padding:15px">No buckets currently defined! Click "Create New Data Bucket" above to create one.</td></tr>
              <!-- {% } %} -->
              <!-- {% $.each(rows, function () { %} -->
              <tr class="{%= this.bucketTypeName.toLowerCase() %}">
                <td class="bucket_name">
                  <a class="disable-if-stale" href="#visitBucket={%=h(this.name)%}" title="Show Bucket info"><span class="expander closed"></span></a>
                  <a class="disable-if-stale" title="View Analytics for {%= h(this.name) %}" href="#sec=analytics&statsBucket={%= h(this.uri) %}">{%= h(this.name) %}</a>
                </td>
                <td>
                  <span id="{%= h(this.name) %}_health" class="health_graph"></span>
                  {%= this.serversCount %}
                </td>
                <td>{%= h(this.basicStats.itemCount) %}</td>
                <td>{%= h(truncateTo3Digits(this.basicStats.opsPerSec)) %}</td>
                {% if (this.bucketType == 'membase') { %}<td>{% if (this.basicStats.diskFetches !== undefined) { %}{%= h(truncateTo3Digits(this.basicStats.diskFetches)) %}{% } else { %}N/A{% } %}</td>{% } %}
                {% if (this.bucketType == 'memcached') { %}<td>{%= h(truncateTo3Digits(this.basicStats.hitRatio * 100)) %}%</td>{% } %}
                <td>{%= V.formatQuantity(this.basicStats.memUsed) %} / {%= V.formatQuantity(this.quota.ram) %}</td>
                <td>{%= V.formatQuantity(this.basicStats.diskUsed) %}</td>
                <td>
                  {% if (this.bucketType == 'membase') { %}
                    <a class="list_button disable-if-stale" href="#sec=views&viewsBucket={%= h(this.name) %}"><span>Views</span></a>
                   <a class="list_button" href="#sec=documents&bucketName={%= this.name %}"><span>Documents</span></a>{% } %}
                </td>
              </tr>
              <tr>
                <td class="settings-placeholder" colspan="10">{%= BucketsSection.renderBucketDetails(this) %}</td>
              </tr>
              <!-- {% }); %} -->
            </table>
          </script>

          <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="properties_table">
                <col width="50%" />
                <col width="50%" />
                  <tr>
                    <td>
                      Access Control: <span>{%= (authType == 'none') ? 'Port' : ((name == 'default') ? 'None' : 'Authentication') %}{%= (authType == 'none') ? (': ' + proxyPort) : '' %}</span>
                    </td>
                    <td>
                  {% if (bucketType == 'membase') { %}
                    {% if (replicaNumber != 0) { %}
                      Replicas: <span>{%= V.count(replicaNumber, 'replica copy') %}</span>
                    {% } else { %}
                      Replicas: <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>

        <div id="logs" 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="panes">
              <div id="logs_container"></div>
              <script id="logs_template" type="text/html">
                        <table class="lined_tab">
                          <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>

        <div id="settings" style="display:none">
          <h1>Settings</h1>
          <div class="shadow_box">
            <div class="section">
              <div class="header_2">
                <ul class="tabs">
                  <li class="tab_left"><a id="settings_update_notifications">Update Notifications</a></li>
                  <li><a id="settings_auto_failover">Auto-Failover</a></li>
                  <li><a id="settings_alerts">Alerts</a></li>
                  <li><a id="settings_compaction">Auto-Compaction</a></li>
                  <li class="tab_right"><a id="settings_sample_buckets">Sample Buckets</a></li>
                </ul>
              </div>
              <div class="panes clearfix">
                <div id="notifications_container" class="notifications-updates"><div class='spinner' style="height:350px;line-height:350px;width:100%"><span>Loading...</span></div></div>
                <div id="auto_failover_container" class="auto_failover"><div class='spinner' style="height:350px;line-height:350px;width:100%"><span>Loading...</span></div></div>
                <div id="email_alerts_container" class="email_alerts"><div class='spinner' style="height:350px;line-height:350px;width:100%"><span>Loading...</span></div></div>
                <div id="compaction_container"><form>
                  <fieldset class="auto_compaction persistent-only">
                    <legend>Auto-Compaction</legend>
                    <p>The Auto-Compaction daemon compacts databases and their respective
                    view indexes when all the condition parameters are satisfied.</p>
                    <ul>
                      <li class="database">
                        <span class="toggle">
                          <input type="checkbox" id="48099acb-df16-4e1e-9949-2aaccfeb9e41" class="check-for-databaseFragmentationThreshold" /> <label for="48099acb-df16-4e1e-9949-2aaccfeb9e41">Database Fragmentation</label>
                        </span>
                        <span class="input_wrapper">
                          <input id="decaebe7-bb14-4c1f-9bb1-70ceb7fb2e43" name="databaseFragmentationThreshold" type="number" />%
                        </span>
                        <label for="decaebe7-bb14-4c1f-9bb1-70ceb7fb2e43">
                          <span>at which point compaction is triggered</span>
                        </label>
                        <div class="error-container err-databaseFragmentationThreshold"></div>
                      </li>
                      <li class="view">
                        <span class="toggle">
                          <input type="checkbox" id="0a2cb7a3-84b7-4822-bf32-87d3e192926a" class="check-for-viewFragmentationThreshold" /> <label for="0a2cb7a3-84b7-4822-bf32-87d3e192926a">View Fragmentation</label>
                        </span>
                        <span class="input_wrapper">
                          <input id="8e49a092-3108-46ed-b5c3-9b95c4ceda6f" name="viewFragmentationThreshold" type="number" />%
                        </span>
                        <label for="8e49a092-3108-46ed-b5c3-9b95c4ceda6f">
                          <span>at which point compaction is triggered</span>
                        </label>
                        <div class="error-container err-viewFragmentationThreshold"></div>
                      </li>
                      <li class="period">
                        <span class="toggle">
                          <input type="checkbox" id="f5962927-16af-4eb6-802c-86fe6c3a238d" class="check-for-allowedTimePeriod"/> <label for="f5962927-16af-4eb6-802c-86fe6c3a238d">Time Period</label>
                        </span>
                        <span class="input_wrapper">
                          <input id="8a786bbb-e9df-46d4-8733-2993ae0c2b95" name="allowedTimePeriod[fromHour]" type="number" min="0" max="23" placeholder="HH" />:<input name="allowedTimePeriod[fromMinute]" type="number" min="0" max="59" placeholder="MM" />
                          - <input name="allowedTimePeriod[toHour]" type="number" min="0" max="23" placeholder="HH" />:<input name="allowedTimePeriod[toMinute]" type="number" min="0" max="59" placeholder="MM" />
                        </span>
                        <label for="8a786bbb-e9df-46d4-8733-2993ae0c2b95">
                          <span>during which compaction is allowed</span>
                        </label>
                        <div class="error-container err-allowedTimePeriod"></div>
                        <div class="error-container err-allowedTimePeriod-fromHour-"></div>
                        <div class="error-container err-allowedTimePeriod-fromMinute-"></div>
                        <div class="error-container err-allowedTimePeriod-toHour-"></div>
                        <div class="error-container err-allowedTimePeriod-toMinute-"></div>
                        <ul>
                          <li>
                            <input type="hidden" name="allowedTimePeriod[abortOutside]" value="false" />
                            <input id="302bc9f8-0a98-4963-85a4-5670ab8f1c25" type="checkbox" name="allowedTimePeriod[abortOutside]" value="true" />
                            <label for="302bc9f8-0a98-4963-85a4-5670ab8f1c25">Abort compaction if run time exceeds the above period</label>
                            <div class="error-container err-allowedTimePeriod-abortOutside-"></div>
                          </li>
                        </ul>
                      </li>
                      <li>
                        <input type="hidden" name="parallelDBAndViewCompaction" value="false" />
                        <input id="f6fb6488-c05a-4baa-88f7-27032da6600b" type="checkbox" name="parallelDBAndViewCompaction" value="true" />
                        <label for="f6fb6488-c05a-4baa-88f7-27032da6600b">Process Database and View compaction in parallel</label>
                        <div class="error-container err-parallelDBAndViewCompaction"></div>
                      </li>
                    </ul>
                  </fieldset> <!-- .auto_compaction -->
                  <div class="save_cancel">
                    <button class="save_button float_right" type="submit">
                      Save
                    </button>
                  </div>
                </form></div>
                <div id="sample_buckets_container"><form id="sample_buckets_form">
                  <p id="sample_buckets_warning" class="warning_message">
                    Your cluster does not have enough RAM quota available to install
                    these samples, please free at least
                    <span id="sampleQuotaRequired"></span>MB of RAM.</p>
                  <p>Sample buckets are available to demonstrate the power of
                    Couchbase Server. These samples contain data and sample MapReduce
                    queries.</p>
                  <h3>Installed Samples</h3>
                  <ul id="installed_samples"></ul>
                  <h3>Available Samples</h3>
                  <ul id="available_samples"></ul>
                    <div class="save_cancel">
                    <button class="save_button float_right" type="submit"
                            id="sample_buckets_settings_btn">
                      Create
                    </button>
                   </div>
                </form></div>
              </div>
            </div>
          </div>

          <script id="notifications_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>{%= h(info) %}</p>
                {% } %}
              {% } %}
            {% } %}
            <label class="for-enable-replicas">
              {% 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 Couchbase web console when a new version of Couchbase Server
              is available. Configuration information transferred in the
              update check is anonymous and does not include any stored
              key-value data.
            </p>
            <div class="save_cancel">
              <button class="save_button float_right" type="button"
                      disabled="disabled">
                Save
              </button>
            </div>
          </script>
          <script id="auto_failover_template" type="text/html">
            <label class="for-enable-replicas"
                   for="auto_failover_enabled">
              <input type="checkbox" id="auto_failover_enabled">
              <span>Enable auto-failover</span>
            </label>
            <label for="auto_failover_timeout">
              <span>Timeout: </span>
            </label>
            <input type="text" id="auto_failover_timeout"
                   value="{%= timeout %}" disabled="disabled" />
            <a class="text_11 tooltip"><span>What's this?</span>
              <span class="tooltip_msg"><span>
                  How long (in seconds) a node must be considered down before it gets auto-failovered.
              </span></span>
            </a>
            <div class="error-container err-timeout"></div>
            {% if (count > 0) { %}
            <div class="count_reset">
              A server was automatically failovered
              <a class="auto_failover_count_reset edit_btn">
                <span>Reset Quota</span>
              </a>
            </div>
            {% } %}
            <div class="save_cancel">
              <button class="save_button float_right" type="button"
                      disabled="disabled">
                Save
              </button>
            </div>
          </script>
          <script id="email_alerts_template" type="text/html">
            <label class="for-enable-replicas"
                   for="email_alerts_enabled">
              <input type="checkbox" id="email_alerts_enabled" />
              <span>Enable email alerts</span>
            </label>
            <fieldset>
              <legend>Email Server Settings</legend>
              <div class="row">
                <label for="email_alerts_host">
                  <span>Host:</span>
                </label>
                <input type="text" id="email_alerts_host"
                       value="{%= h(emailServer.host) %}" disabled="disabled" />
              </div>
              <div>
                <label for="email_alerts_port">
                  <span>Port:</span>
                </label>
                <input type="text" id="email_alerts_port"
                       value="{%= h(emailServer.port) %}" disabled="disabled" />
                <div class="error-container err-email_port"></div>
              </div>
              <label for="email_alerts_user">
                <span>Username:</span>
              </label>
              <input type="text" id="email_alerts_user"
                     value="{%= h(emailServer.user) %}" disabled="disabled" />
              <label for="email_alerts_pass">
                <span>Password:</span>
              </label>
              <input type="password" id="email_alerts_pass"
                     value="{%= h(emailServer.pass) %}" disabled="disabled" />
            </fieldset>
            <fieldset>
              <legend>Email Settings</legend>
              <label for="email_alerts_sender">
                <span>Sender email:</span>
              </label>
              <input type="text" id="email_alerts_sender"
                     value="{%= h(sender) %}" disabled="disabled" />
              <div class="error-container err-sender"></div>
              <label for="email_alerts_sender">
                <span>Recipients:</span>
              </label>
              <textarea id="email_alerts_recipients" disabled="disabled">{%= h(recipients) %}</textarea>
              <span style="vertical-align:top;margin:0 5px;line-height:24px">separate addresses with comma "," or semicolon ";" or spaces " "</span></div>
              <div class="error-container err-recipients"></div>
              <div><button class="edit_btn" id="test_email">Test Mail</button> <span>using the settings above</span></div>
            </fieldset>
            <fieldset id="email_alerts_alerts">
              <legend>Available Alerts</legend>
              <div class="checkboxes">
                {% for (var i=0; i<alerts.length; i++) { %}
                <label for="email_alerts_alerts_{%= h(alerts[i].label) %}">
                  <input type="checkbox"
                         id="email_alerts_alerts_{%= h(alerts[i].value) %}"
                         value="{%= h(alerts[i].value) %}"
                         {% if (alerts[i].enabled) { %}
                         checked="checked"
                         {% } %}
                         />
                  <span>{%= h(alerts[i].label) %}</span>
                </label>
                {% } %}
              </div>
            </fieldset>
            <div class="save_cancel">
              <button class="save_button float_right" type="button"
                      disabled="disabled">
                Save
              </button>
            </div>
          </script>
        </div>

        <div id="views" style="display:none">
          <h1 style="clear:both;overflow:hidden">
            <span style="float:left"><select id="views_bucket_select"></select> &gt; <a href="#visitSec=views">Views</a>
              <span class="when-inside-view">
                &gt; <select id="views_view_select"></select>
              </span>
            </span>
          </h1>
          <div id="views_spinner" class="spinner" style="height:100px;line-height:100px;display:none;"><span>Loading...</span></div>
          <div class="shadow_box" id="views_list">
            <div class="header_2">
              <ul class="tabs switcher">
                <li class="tab_left">
                  <a>Development Views</a>
                </li>
                <li class="tab_right">
                  <a>Production Views</a>
                  <span class="badge notify"><span id="prod_view_count">??</span></span>
                </li>
              </ul>
              <div class="create_view">
                <a class="button_200 btn_create when-in-dev"><span>Create Development View</span></a>
                <span class="staleness-notice">Difficulties communicating with the cluster; displaying cached information!</span>
              </div>
            </div>
            <div class="panes">
              <div>
                <div id="development_views_list_container" class="views_list">Development Views</div>
              </div>
              <div>
                <div id="production_views_list_container" class="views_list">Production Views</div>
              </div>
            </div>
          </div>

          <script id="views_list_template" type="text/html">
            <table class="list" width="100%">
            <thead>
              <tr>
                <th>Name</th>
                <th>Language</th>
                <th>Status</th>
                <th><div style="display:none">Disk Size</div></th>
                <th class="last"></th>
              </tr>
            </thead>

            <!-- {% if (!bucketName) { %} -->
            <tbody>
              <tr>
                <td colspan="10" class="empty">
                  <span>
                    No buckets currently defined! Go to
                    <a href="#sec=buckets">Data Buckets</a>
                    to create some.
                  </span>
                </td>
              </tr>
            </tbody>

            <!-- {% } else if (!rows.length) { %} -->
            <tbody>
              <tr><td colspan="10" class="empty">
                <span class="when-in-dev">There are currently no Design Documents in Development. Click "Create Development View" above to create one.</span>
                <span class="when-in-prod">There are no Design Documents currently published. Please visit "Development Views" to create one.</span>
              </td></tr>
            </tbody>
            <!-- {% } else { %} -->
            <!-- {% _.each(rows, function (ddoc) {  %} -->
            <tbody>
              <tr>
                <td class="design_doc_name">
                  {%= h(ddoc._id) %}
                </td>
                <td class="langv">{%= h(ddoc.language || "javascript") %}</td>
                <td>
                  <!-- {% if (ddoc.progress) {  %} -->
                  <div class="indexer_progress">
                    <div class="usage_smallest">
                      <div class="used" style="width: {%= h(ddoc.progress) %}%"></div>
                    </div>
                    <span class="ddoc_message">{%= (ddoc.taskType == 'indexer') ? "Indexing" : "Compacting" %} {%= h(ddoc.progress) %}%</span>
                  </div>
                  <!-- {% } %} -->
                </td>
                <td>
                </td>
                <td>
                  <a class="list_button when-in-prod" href="#copyDDoc={%=h(ddoc._id)%}"><span>Copy to Dev</span></a>
                  <a class="list_button when-in-dev" href="#publishDDoc={%=h(ddoc._id)%}"><span>Publish</span></a>
                  <a class="list_button when-in-dev" href="#addView={%=h(ddoc._id)%}"><span>Add View</span></a>
                  <a class="list_button when-in-dev" href="#addSpatial={%=h(ddoc._id)%}"><span>Add Spatial View</span></a>
                  <a class="list_button" href="#deleteDDoc={%=h(ddoc._id)%}"><span>Delete</span></a>
                </td>
              </tr>
              <!-- {% if (_.size(ddoc.viewInfos) < 1 && _.size(ddoc.spatialInfos) < 1) { %} -->
              <tr><td colspan="10" style="padding:15px">No views defined!<span class="when-in-dev"> Click "Create Development View" above to create one.</span></td></tr>
              <!-- {% } else { if (_.size(ddoc.viewInfos) > 0) { %} -->
              <!-- {% _.each(ddoc.viewInfos, function (viewInfo) { %} -->
              <tr>
                <td class="view_name" colspan="4">
                  <a href="{%=h(viewInfo.viewLink)%}">{%= h(viewInfo.name) %}</a>
                </td>
                <td>
                  <a class="list_button btn_remove" href="{%=h(viewInfo.removeLink)%}"><span>Delete</span></a>
                </td>
              </tr>
              <!-- {% }); %} -->
              <!-- {% } if (_.size(ddoc.spatialInfos) > 0) { %} -->
              <!-- {% _.each(ddoc.spatialInfos, function (spatialInfo) { %} -->
              <tr>
                <td class="view_name" colspan="3">
                  <a href="{%=h(spatialInfo.viewLink)%}">[Spatial] {%= h(spatialInfo.name) %}</a>
                </td>
                <td>
                  <a class="list_button btn_remove" href="{%=h(spatialInfo.removeLink)%}"><span>Delete</span></a>
                </td>
              </tr>
              <!-- {% }); %} -->
              <!-- {% } } %} -->
            </tbody>
            <!-- {% }); %} -->
            <!-- {% } %} -->
            </table>
            </script>

          <div id="view_details" style="display:none;">
            <div id="no_sample_docs" class="shadow_box" style="display:none">
              <h3 class="block-expander" style="padding:15px">Bucket is currently empty.</h3>
            </div>
            <div id="sample_docs" class="shadow_box">
              <div class="darker_block bucket_details">
                <h3 class="block-expander">
                  <ins></ins><span class="view_head">Sample Document</span>

                  <span class="buttons">
                    <input type="text" id="lookup_doc_by_id" placeholder="Document ID"/>
                    <a class="btn_1" id="lookup_doc_by_id_btn"><span>Lookup Id</span></a>
                    <a class="btn_1" id="preview_random_doc">
                      <span>Preview a Random Document</span>
                    </a>
                  </span>

                </h3>
                  <span class="buttons when-not-editing">
                    <a class="btn_1" id="edit_preview_doc"><span>Edit</span></a>
                  </span>
                  <span class="buttons when-editing">
                    <a class="btn_1" id="cancel_preview_doc"><span>Cancel</span></a>
                    <a class="btn_1" id="save_preview_doc"><span>Save</span></a>
                  </span>

                <div class="stats">
                  <textarea id="sample_doc_editor"></textarea>
                </div>
              </div>
            </div>

            <div class="shadow_box viewcode" id="viewcode" style="display:none;">
              <div class="darker_block">
                <h3 class="block-expander"><ins></ins><span class="view_head">View Code</span>
                  <span class="buttons">
                    <a id="save_view_as" class="btn_1"><span>Save As...</span></a>
                    <a id="just_save_view" class="btn_1"><span>Save</span></a>
                  </span>
                </h3>
                <div class="stats">
                  <table class="list"><tbody><tr>
                    <td class="code map" style="width: 654px;">
                      <label for="viewcode_map">Map</label>
                      <textarea spellcheck="false" cols="20" rows="11" class="map" id="viewcode_map"></textarea>
                    </td>
                    <td class="splitter grippie"></td>
                    <td class="code reduce">
                      <label for="viewcode_reduce">Reduce<span class="when-in-dev"> (<span id="built_in_reducers">built in: <a>_count</a>, <a>_sum</a>, <a>_stats</a></span>)</span></label>
                      <textarea placeholder="(optional)" spellcheck="false" cols="20" rows="11" class="reduce" id="viewcode_reduce"></textarea>
                    </td>
                  </tr></tbody></table>
                </div>
              </div>
            </div>

            <div class="shadow_box viewcode" id="spatialcode" style="display:none;">
              <div class="darker_block">
                <h3 class="block-expander"><ins></ins><span class="view_head">Spatial Code</span>
                  <span class="buttons">
                    <a id="save_spatial_as" class="btn_1"><span>Save As...</span></a>
                    <a id="just_save_spatial" class="btn_1"><span>Save</span></a>
                  </span>
                </h3>
                <div class="stats">
                  <table class="list"><tbody><tr>
                    <td class="code map" style="width: 654px;">
                      <label for="spatialcode_fun">Spatial</label>
                      <textarea spellcheck="false" cols="20" rows="11" class="map" id="spatialcode_fun"></textarea>
                    </td>
                  </tr></tbody></table>
                </div>
              </div>
            </div>

            <div id="view_results_block" class="results_block" style="display:none;">
              <h1>Filter Results <a id="view_run_button" class="run_button btn_1 bt_marg"><span>Show Results</span></a>
                <span class="view_query_string"></span>
                <span class="ic_prev_next">
                    <a class="arr_prev"></a>
                    <a class="arr_next"></a>
                </span> <!--/ic_prev_next-->
              </h1>
              <!--filter result-->
              <div class="f_wrap">
                <div class="filter_cont">
                    <a href="#" class="exp_filter"></a>
                </div><!--/filter_cont-->
                <div class="f_popup" >
                  <div class="f_cont">
                    <div class="br_right"></div>
                    <div class="wrap">
                      <select id="view_filters" name="standard-dropdown">
                          <option value=""></option>
                          <!-- <option value="conflicts">conflicts</option> -->
                          <option value="stale">stale</option>
                          <option value="reduce">reduce</option>
                          <option value="group">group</option>
                          <option value="group_level">group_level</option>
                          <option value="startkey">startkey</option>
                          <option value="endkey">endkey</option>
                          <option value="startkey_docid">startkey_docid</option>
                          <option value="endkey_docid">endkey_docid</option>
                          <option value="inclusive_end">inclusive_end</option>
                          <option value="descending">descending</option>
                          <option value="key">key</option>
                          <option value="keys">keys</option>
                          <option value="connection_timeout">connection_timeout</option>
                      </select>
                    </div><!--/wrap-->
                    <a id="view_filter_add" class="ic_plus"></a>

                    <table class="key">
                      <!-- <tr><td><div class="btn_x"></div></td> -->
                        <!-- <td><label for="view_filter_conflicts">conflicts</label></td> -->
                        <!-- <td><input id="view_filter_conflicts" name="conflicts" type="checkbox" /></td></tr> -->
                      <tr><td><div class="btn_x"></div></td>
                        <td><label for="view_filter_descending">descending</label></td>
                        <td><input id="view_filter_descending" name="descending" type="checkbox" /></td></tr>
                      <tr><td><div class="btn_x"></div></td>
                        <td><label for="view_filter_endkey">endkey</label></td>
                        <td><input id="view_filter_endkey" name="endkey" type="text" /></td></tr>
                      <tr><td><div class="btn_x"></div></td>
                        <td><label for="view_filter_endkey_docid">endkey_docid</label></td>
                        <td><input id="view_filter_endkey_docid" name="endkey_docid" type="text" /></td></tr>
                      <tr><td><div class="btn_x"></div></td>
                        <td><label for="view_filter_group">group</label></td>
                        <td><input id="view_filter_group" name="group" type="checkbox" /></td></tr>
                      <tr><td><div class="btn_x"></div></td>
                        <td><label for="view_filter_group_level">group_level</label></td>
                        <td><input id="view_filter_group_level" name="group_level" type="text" /></td></tr>
                      <tr><td><div class="btn_x"></div></td>
                        <td><label for="view_filter_include_docs">include_docs</label></td>
                        <td><input id="view_filter_include_docs" name="include_docs" type="checkbox" /></td></tr>
                      <tr><td><div class="btn_x"></div></td>
                        <td><label for="view_filter_inclusive_end">inclusive_end</label></td>
                        <td><input id="view_filter_inclusive_end" name="inclusive_end" type="checkbox" /></td></tr>
                      <tr><td><div class="btn_x"></div></td>
                        <td><label for="view_filter_key">key</label></td>
                        <td><input id="view_filter_key" name="key" type="text" /></td></tr>
                      <tr><td><div class="btn_x"></div></td>
                        <td><label for="view_filter_keys">keys</label></td>
                        <td><input id="view_filter_keys" name="keys" type="text" /></td></tr>
                      <tr><td><div class="btn_x"></div></td>
                        <td><label for="view_filter_reduce">reduce</label></td>
                        <td><input id="view_filter_reduce" name="reduce" type="checkbox" /></td></tr>
                      <tr><td><div class="btn_x"></div></td>
                        <td><label for="view_filter_startkey">startkey</label></td>
                        <td><input id="view_filter_startkey" name="startkey" type="text" /></td></tr>
                      <tr><td><div class="btn_x"></div></td>
                        <td><label for="view_filter_startkey_docid">startkey_docid</label></td>
                        <td><input id="view_filter_startkey_docid" name="startkey_docid" type="text" /></td></tr>
                      <tr><td><div class="btn_x"></div></td>
                        <td><label for="view_filter_update_seq">update_seq</label></td>
                        <td><input id="view_filter_update_seq" name="update_seq" type="checkbox" /></td></tr>
                      <tr><td><div class="btn_x"></div></td>
                        <td><label for="view_filter_stale">stale</label></td>
                        <td>
                          <select id="view_filter_stale" name="stale" class="selectBox">
                            <option value="false">false</option>
                            <option value="update_after">update_after</option>
                            <option value="ok">ok</option>
                          </select>
                        </td></tr>
                      <tr><td><div class="btn_x"></div></td>
                        <td><label for="view_filter_connection_timeout">connection_timeout</label></td>
                        <td><input id="view_filter_connection_timeout" name="connection_timeout" type="text" placeholder="milliseconds" /></td></tr>
                    </table><!--/key-->

                  </div><!--f_cont-->
                </div><!--f_popup-->
              </div>
              <!--/filter result-->
              <div class="shadow_box">
                <ul class="tabs dev-subset-switcher when-in-dev">
                  <li class="tab_left"><a class="subset_dev">Development Time Subset</a></li>
                  <li class="tab_right"><a class="subset_prod">Full Cluster Data Set</a></li>
                </ul>
                <div id="view_results_spinner" class="spinner" style="height:100px;line-height:100px;display:none;"><span>Loading...</span></div>
                <div id="view_results_container" class="content c_result"></div>
              </div>
              <script id="view_results_template" type="text/html">
              <table class="list align_text" style="width:100%">
                <tr>
                    <th class="keycol">Key</th>
                    <th>Value</th>
                </tr>
              <!-- {% if (!rows.lackOfValue) { %} -->
                <!-- {% _.each(rows, function (r) { %} -->
                <tbody>
                <tr>
                    <td class="keycol">
                        <div class="key">{%= h(JSON.stringify(r.key)) %}</div>
                        {% if (h(r.id) !== "undefined") { %}
                          <a class="id">{%= h(r.id) %}</a>
                        {% } else { %}
                          <div class="id">{%= h(r.id) %}</div>
                        {% } %}
                    </td>
                    <td>{%= $.futon.formatJSON(r.value, {html:true}) %}</td>
                </tr>
                </tbody>
                <!-- {% }); %} -->
              <!-- {% } else { %} -->
                <tbody>
                <tr><td colspan="2" style="text-align:center">To see the results of this view, click "Show Results" above.</td></tr>
                </tbody>
              <!-- {% } %} -->
              </table>
                </script>
            </div>

            <div id="spatial_results_block" class="results_block" style="display:none;">
              <h1>Filter Results <a id="spatial_run_button" class="run_button btn_1 bt_marg"><span>Show Results</span></a>
                <span class="view_query_string"></span>
                <span class="ic_prev_next">
                    <a class="arr_prev"></a>
                    <a class="arr_next"></a>
                </span> <!--/ic_prev_next-->
              </h1>
              <!--filter result-->
              <div class="f_wrap">
                <div class="filter_cont">
                    <a href="#" class="exp_filter"></a>
                </div><!--/filter_cont-->
                <div class="f_popup" >
                  <div class="f_cont">
                    <div class="br_right"></div>
                    <div class="wrap">
                      <select id="spatial_filters" name="standard-dropdown">
                          <option value=""></option>
                          <!-- <option value="conflicts">conflicts</option> -->
                          <option value="stale">stale</option>
                          <option value="bbox">bbox</option>
                          <option value="connection_timeout">connection_timeout</option>
                      </select>
                    </div><!--/wrap-->
                    <a id="spatial_filter_add" class="ic_plus"></a>

                    <table class="key">
                      <!-- <tr><td><div class="btn_x"></div></td> -->
                        <!-- <td><label for="view_filter_conflicts">conflicts</label></td> -->
                        <!-- <td><input id="view_filter_conflicts" name="conflicts" type="checkbox" /></td></tr> -->
                      <tr><td><div class="btn_x"></div></td>
                        <td><label for="spatial_filter_bbox">bbox</label></td>
                        <td><input id="spatial_filter_bbox" name="bbox" type="text" /></td></tr>
<!--
                      <tr><td><div class="btn_x"></div></td>
                        <td><label for="view_filter_end_key_docid">end_key_docid</label></td>
                        <td><input id="view_filter_end_key_docid" name="end_key_docid" type="text" /></td></tr>
                      <tr><td><div class="btn_x"></div></td>
                        <td><label for="view_filter_group">group</label></td>
                        <td><input id="view_filter_group" name="group" type="checkbox" /></td></tr>
                      <tr><td><div class="btn_x"></div></td>
                        <td><label for="view_filter_group_level">group_level</label></td>
                        <td><input id="view_filter_group_level" name="group_level" type="text" /></td></tr>
                      <tr><td><div class="btn_x"></div></td>
                        <td><label for="view_filter_include_docs">include_docs</label></td>
                        <td><input id="view_filter_include_docs" name="include_docs" type="checkbox" /></td></tr>
                      <tr><td><div class="btn_x"></div></td>
                        <td><label for="view_filter_inclusive_end">inclusive_end</label></td>
                        <td><input id="view_filter_inclusive_end" name="inclusive_end" type="checkbox" /></td></tr>
                      <tr><td><div class="btn_x"></div></td>
                        <td><label for="view_filter_key">key</label></td>
                        <td><input id="view_filter_key" name="key" type="text" /></td></tr>
                      <tr><td><div class="btn_x"></div></td>
                        <td><label for="view_filter_keys">keys</label></td>
                        <td><input id="view_filter_keys" name="keys" type="text" /></td></tr>
                      <tr><td><div class="btn_x"></div></td>
                        <td><label for="view_filter_reduce">reduce</label></td>
                        <td><input id="view_filter_reduce" name="reduce" type="checkbox" /></td></tr>
                      <tr><td><div class="btn_x"></div></td>
                        <td><label for="view_filter_start_key">start_key</label></td>
                        <td><input id="view_filter_start_key" name="start_key" type="text" /></td></tr>
                      <tr><td><div class="btn_x"></div></td>
                        <td><label for="view_filter_start_key_docid">start_key_docid</label></td>
                        <td><input id="view_filter_start_key_docid" name="start_key_docid" type="text" /></td></tr>
                      <tr><td><div class="btn_x"></div></td>
                        <td><label for="view_filter_update_seq">update_seq</label></td>
                        <td><input id="view_filter_update_seq" name="update_seq" type="checkbox" /></td></tr>
-->
                      <tr><td><div class="btn_x"></div></td>
                        <td><label for="spatial_filter_stale">stale</label></td>
                        <td>
                          <select id="spatial_filter_stale" name="stale" class="selectBox">
                            <option value="update_after">update_after</option>
                            <option value="ok">ok</option>
                          </select>
                        </td></tr>
                      <tr><td><div class="btn_x"></div></td>
                        <td><label for="view_filter_connection_timeout">connection_timeout</label></td>
                        <td><input id="view_filter_connection_timeout" name="connection_timeout" type="text" placeholder="milliseconds" /></td></tr>
                    </table><!--/key-->

                  </div><!--f_cont-->
                </div><!--f_popup-->
              </div>
              <!--/filter result-->
              <div class="shadow_box">
                <ul class="tabs dev-subset-switcher when-in-dev">
                  <li class="tab_left"><a class="subset_dev">Development Time Subset</a></li>
                  <li class="tab_right"><a class="subset_prod">Full Cluster Data Set</a></li>
                </ul>
                <div id="spatial_results_spinner" class="spinner" style="height:100px;line-height:100px;display:none;"><span>Loading...</span></div>
                <div id="spatial_results_container" class="content c_result"></div>
              </div>
              <script id="spatial_results_template" type="text/html">
              <table class="list align_text" style="width:100%">
                <tr>
                    <th class="keycol">Bbox</th>
                    <th class="keycol">Geometry</th>
                    <th>Value</th>
                </tr>
              <!-- {% if (!rows.lackOfValue) { %} -->
                <!-- {% _.each(rows, function (r) { %} -->
                <tbody>
                <tr>
                    <td class="keycol">
                        <div class="key">{%= h(JSON.stringify(r.bbox)) %}</div>
                        {% if (h(r.id) !== "undefined") { %}
                          <a class="id">{%= h(r.id) %}</a>
                        {% } else { %}
                          <div class="id">{%= h(r.id) %}</div>
                        {% } %}
                    </td>
                    <td>{%= h(JSON.stringify(r.geometry)) %}</td>
                    <td>{%= $.futon.formatJSON(r.value, {html:true}) %}</td>
                </tr>
                </tbody>
                <!-- {% }); %} -->
              <!-- {% } else { %} -->
                <tbody>
                <tr><td colspan="3" style="text-align:center">To see the results of this view, click "Show Results" above.</td></tr>
                </tbody>
              <!-- {% } %} -->
              </table>
                </script>
            </div>

          </div>
        </div>

        <div id="replications" style="display:none">
          <h1>Replications</h1>
          <!-- Clusters -->
          <div id="cluster_references" class="shadow_box">
            <div class="darker_block bucket_details">
              <h3 class="block-expander">
                <ins></ins><span class="view_head">Remote Clusters</span>
                <span class="buttons">
                  <a class="btn_1" id="create_cluster_reference">
                    <span>Create Cluster Reference</span>
                  </a>
                </span>
              </h3>

              <div class="stats" id="cluster_reference_list_container">
              </div>
              <script id="cluster_reference_list_template" type="text/html">
              <table class="list" style="width:100%">
                <tr>
                  <th>Name</th>
                  <th>IP/hostname</th>
                  <th></th>
                </tr>
                <!-- {% if (rows.length > 0) { %} -->
                <!-- {% _.each(rows, function (r) { %} -->
                <tr data-name="{%= h(r.name) %}">
                  <td>{%= h(r.name) %}</td>
                  <td>{%= h(r.hostname) %}</td>
                  <td>
                    <a class="list_button edit-button"><span>Edit</span></a>
                    <a class="list_button delete-button"><span>Delete</span></a>
                  </td>
                </tr>
                <!-- {% }); %} -->
                <!-- {% } else { %} -->
                <tr><td colspan="3" style="text-align:center">No cluster references defined. Please create one.</td></tr>
                <!-- {% } %} -->
              </table>
              </script>
            </div>
          </div>

          <!-- Ongoing Replications -->
          <div id="ongoing_replications" class="shadow_box">
            <div class="darker_block bucket_details">
              <h3>
                <span class="view_head" style="padding-left: 0">Ongoing Replications</span>
                <span class="buttons">
                  <a class="btn_1" id="create_replication">
                    <span>Create Replication</span>
                  </a>
                </span>
              </h3>

              <div class="stats" id="ongoing_replications_list_container">
              </div>
              <script id="ongoing_replications_list_template" type="text/html">
              <table class="list" style="width:100%">
                <tr>
                  <th>Bucket</th>
                  <th>From</th>
                  <th>To</th>
                  <th>Status</th>
                  <th>When</th>
                  <th>Last Run</th>
                  <th></th>
                </tr>
                <!-- {% if (rows.length > 0) { %} -->
                <!-- {% _.each(rows, function (r) { %} -->
                <tr>
                  <td>{%= h(r.bucket) %}</td>
                  <td style="color:#777">this cluster</td>
                  <td>{%= h(r.to) %}</td>
                  <td>{%= h(r.status) %}</td>
                  <td>{%= h(r.when) %}</td>
                  <td>{%= r.lastRun && V.formatLogTStamp(r.lastRun) %}</td>
                  <td>
                    <a class="list_button" href="#deleteReplication={%=h(r._id)%}"><span>Delete</span></a>
                  </td>
                </tr>
                <!-- {% }); %} -->
                <!-- {% } else { %} -->
                <tr><td colspan="7" style="text-align:center">There are now
                replications currently in progress. Check Past Replications
                below, or create a new replication.</td></tr>
                <!-- {% } %} -->
              </table>
              </script>
            </div>
          </div>

          <!-- Past Replicaitons -->
          <div id="past_replications" class="shadow_box">
            <div class="darker_block bucket_details">
              <h3 class="block-expander">
                <ins></ins><span class="view_head">Past Replications</span>
              </h3>

              <div class="stats" id="past_replications_list_container">
              </div>
              <script id="past_replications_list_template" type="text/html">
              <table class="list" style="width:100%">
                <tr>
                  <th>Bucket</th>
                  <th>From</th>
                  <th>To</th>
                  <th>Status</th>
                  <th>When</th>
                  <th>Last Run</th>
                </tr>
                <!-- {% if (rows.length > 0) { %} -->
                <!-- {% _.each(rows, function (r) { %} -->
                <tr>
                  <td>{%= h(r.bucket) %}</td>
                  <td style="color:#777">this cluster</td>
                  <td>{%= h(r.to) %}</td>
                  <td>{%= h(r.status) %}</td>
                  <td>{%= h(r.when) %}</td>
                  <td>{%= r.lastRun && V.formatLogTStamp(r.lastRun) %}</td>
                </tr>
                <!-- {% }); %} -->
                <!-- {% } else { %} -->
                <tr><td colspan="7" style="text-align:center">No replications
                have been run from this cluster yet. Create one in the Ongoing
                Replicaitons section above.</td></tr>
                <!-- {% } %} -->
              </table>
              </script>
            </div>
          </div>
        </div>

          <div id="documents" style="display:none">
            <h1 style="clear:both;overflow:hidden">
              <span style="float:left">
                <select id="docs_buckets_select"></select> &gt; Documents
              </span>
            <span class="ic_prev_next">
              <a class="arr_prev"></a>
              <a class="arr_next"></a>
            </span> <!--/ic_prev_next-->

            </h1>

            <div class="shadow_box">
              <div class="header_2 servers_header">
                All Documents
                <div class="editing_ctrls">

                  <input type="text" id="docs_lookup_doc_by_id"
                         placeholder="Document ID"/>
                  <a class="btn_1" id="docs_lookup_doc_by_id_btn">
                    <span>Lookup Id</span>
                  </a>
                  &nbsp;&nbsp;
                  <a class="btn_1 btn_create"><span>Create Document</span></a>
                  <span class="staleness-notice">Difficulties communicating with the cluster; displaying cached information!</span>
                </div>
              </div>
              <!-- TODO: should we use panes here and pre-populate both all docs & design docs?
                         or just use a single container and change it's context requesting new data on click? -->
              <div id="documents_list_container">Documents</div>
              <script id="documents_list_template" type="text/html">
              <table class="list align_text" style="width:100%">
                <tr>
                    <th class="keycol">ID</th>
                    <th>Revision</th>
                    <th></th>
                </tr>
              <!-- {% if (loading) { %} -->
                 <div class='spinner' style="height:350px;line-height:350px;width:100%"><span>Loading...</span></div>
              <!-- {% } else if (rows.length > 0) { %} -->
                <!-- {% _.each(rows, function (r) { %} -->
                <tbody>
                <tr>
                    <td class="keycol">
                        <div class="key">
                          <a href="#sec=edit_doc&bucketName={%= bucketName %}&docId={%= encodeURIComponent(r.id) %}">{%= h(JSON.stringify(r.key)).replace(/"/g, '') %}</a>
                        </div>
                    </td>
                    <td>{%= $.futon.formatJSON(r.value, {html:true}) %}</td>
                    <td><a href="#sec=edit_doc&bucketName={%= bucketName %}&docId={%= r.id %}" class="list_button btn_edit"><span>Edit Document</span></a></td>
                </tr>
                </tbody>
                <!-- {% }); %} -->
              <!-- {% } else { %} -->
                <tbody>
                <tr><td colspan="2" style="text-align:center">There are currently no documents in this bucket.</td></tr>
                </tbody>
              <!-- {% } %} -->
              </table>
              </script>
            </div>
          </div>

          <div id="edit_doc" style="display:none">
            <h1 style="clear:both;overflow:hidden">
              <span style="float:left">
                <select id="doc_buckets_select"></select> &gt; <a href="#sec=documents">Documents</a>
              </span>
            </h1>
            <div class="shadow_box">
              <div class="header_2 servers_header">

                <div style="float:left" id="json_doc_id"></div>
                <span id="editing-notice"></span>
                <div class="editing_ctrls">
                  <a class="btn_1" id="doc_delete"><span>Delete</span></a>
                  <a class="btn_1" id="doc_saveas"><span>Save As...</span></a>
                  <a class="btn_1 btn_save" id="doc_save"><span>Save</span></a>
                  <span class="staleness-notice">Difficulties communicating with the cluster; displaying cached information!</span>
                </div>
              </div>
              <textarea id="json_doc" spellcheck="false" cols="20" rows="11"></textarea>
            </div>
          </div>

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

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

<!-- dialogs -->
<div class="dialog bucket_details really" id="bucket_details_dialog">
  <h1><span class="when-editing">Configure Bucket</span><span class="when-creating">Create Bucket</span></h1>
  <form>
    <fieldset class="bucket_settings">
      <legend>Bucket Settings</legend>
      <ul>
        <li>
          <label class="for-name"><span>Bucket Name:</span><input disabled name="name" value="Bucket Name"><span class="error-container err-name"></span></label>
        </li>
        <li>
          <fieldset class="radiogroup for-bucket-type">
            <legend>Bucket Type:</legend>
            <ul>
              <li><label><input type="radio" name="bucketType" value="membase"> Couchbase</label></li>
              <li><label><input type="radio" name="bucketType" value="memcached"> Memcached</label></li>
            </ul>
          </fieldset>
        </li>
      </ul>
    </fieldset>

    <fieldset style="margin-top:0">
      <legend>Memory Size</legend>
      <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>

      <input name="ramQuotaMB" type="hidden" />
      <label class="for-ram-quota">
        <span>Per Node RAM Quota:</span>
        <input name="ramQuotaMB" type="text" value="30" />
        <abbr>MB</abbr>
      </label>

      <div class="error-container err-ramQuotaMB"></div>
      <em class="memcached-summary when-non-persistent"></em>
    </fieldset>

    <fieldset>
      <legend>Access Control</legend>
      <div class="wrap_acc">
        <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>
      </div>
    </fieldset>

    <fieldset class="persistent-only">
      <legend>Replicas</legend>
      <div class="repli">
      <label class="for-enable-replicas"><input type="checkbox" checked><span>Enable </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>
      <input type="hidden" name="replicaIndex" value="0"/>
      <label style="padding-left: 20px;"><input type="checkbox" name="replicaIndex" value="1" style="margin-right:5px;"/>Index replicas</label>
    </fieldset> <!-- .persistent-only -->

    <fieldset class="auto_compaction persistent-only">
      <legend>Auto-Compaction</legend>
      <p>The Auto-Compaction daemon compacts databases and their respective
      view indexes when all the condition parameters are satisfied.</p>
      <ul>
        <li><input type="hidden" name="autoCompactionDefined" value="false" />
          <label><input type="checkbox" name="autoCompactionDefined" value="true" /> Override the default autocompaction settings?</label>
        </li>
      </ul><ul class="autocompaction-settings">
        <li class="database">
          <span class="toggle">
            <input type="checkbox" id="db_frag_check" class="check-for-databaseFragmentationThreshold" /> <label for="db_frag_check">Database Fragmentation</label>
          </span>
          <span class="input_wrapper">
            <input id="32cc3a81-c0e9-495a-836e-3fdeb1384110" name="databaseFragmentationThreshold" type="number" />%
          </span>
          <label for="32cc3a81-c0e9-495a-836e-3fdeb1384110">
            <span>at which point compaction is triggered</span>
          </label>
          <div class="error-container err-databaseFragmentationThreshold"></div>
        </li>
        <li class="view">
          <span class="toggle">
            <input type="checkbox" id="view_frag_check" class="check-for-viewFragmentationThreshold" /> <label for="view_frag_check">View Fragmentation</label>
          </span>
          <span class="input_wrapper">
            <input id="f9a08cc9-e572-4b6e-b4d2-1fe2b0b11852" name="viewFragmentationThreshold" type="number" />%
          </span>
          <label for="f9a08cc9-e572-4b6e-b4d2-1fe2b0b11852">
            <span>at which point compaction is triggered</span>
          </label>
          <div class="error-container err-viewFragmentationThreshold"></div>
        </li>
        <li class="period">
          <span class="toggle">
            <input type="checkbox" id="period_check" class="check-for-allowedTimePeriod"/> <label for="period_check">Time Period</label>
          </span>
          <span class="input_wrapper">
            <input id="2cbc1fe9-d580-4126-9c7e-777fe7adf233" name="allowedTimePeriod[fromHour]" type="number" min="0" max="23" placeholder="HH" />:<input name="allowedTimePeriod[fromMinute]" type="number" min="0" max="59" placeholder="MM" />
            - <input name="allowedTimePeriod[toHour]" type="number" min="0" max="23" placeholder="HH" />:<input name="allowedTimePeriod[toMinute]" type="number" min="0" max="59" placeholder="MM" />
          </span>
          <label for="2cbc1fe9-d580-4126-9c7e-777fe7adf233">
            <span>during which compaction is allowed</span>
          </label>
          <div class="error-container err-allowedTimePeriod"></div>
          <div class="error-container err-allowedTimePeriod-fromHour-"></div>
          <div class="error-container err-allowedTimePeriod-fromMinute-"></div>
          <div class="error-container err-allowedTimePeriod-toHour-"></div>
          <div class="error-container err-allowedTimePeriod-toMinute-"></div>
          <ul>
            <li>
              <input type="hidden" name="allowedTimePeriod[abortOutside]" value="false" />
              <input id="66fdfb02-6c6f-453e-9ae3-fa011ecd42c0" type="checkbox" name="allowedTimePeriod[abortOutside]" value="true" />
              <label for="66fdfb02-6c6f-453e-9ae3-fa011ecd42c0">Abort compaction if run time exceeds the above period</label>
              <div class="error-container err-allowedTimePeriod-abortOutside-"></div>
            </li>
          </ul>
        </li>
        <li>
          <input type="hidden" name="parallelDBAndViewCompaction" value="false" />
          <input id="089ccca1-8688-41f9-a126-71a871b2ecf6" type="checkbox" name="parallelDBAndViewCompaction" value="true" />
          <label for="089ccca1-8688-41f9-a126-71a871b2ecf6">Process Database and View compaction in parallel</label>
          <div class="error-container err-parallelDBAndViewCompaction"></div>
        </li>
      </ul>
    </fieldset> <!-- .auto_compaction -->

    <div class="save_cancel">
      <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>

<!-- Create Document -->
<div class="dialog join_cluster" id="create_document_dialog" title="Create Document" style="width:400px">
  <form>
    <fieldset style="padding-top:10px">
      <ul>
        <li>
          <label for="new_doc_id" style="width:auto">Document ID:</label>
          <input type="text" name="id" id="new_doc_id" />
        </li>
      </ul>
    </fieldset>
    <div class="save_cancel clearfix">
      <button type="submit" class="save_button float_right">Create</button>
      <a class="close">Cancel</a>
    </div>
  </form>
</div>
<!-- END Create Document -->
<!-- END Save Document as -->
<div class="dialog join_cluster" id="save_documentas_dialog" title="Save Document As" style="width:400px">
  <form>
    <fieldset style="padding-top:10px">
      <ul>
        <li>
          <label for="new_doc_id" style="width:auto">Document ID:</label>
          <input type="text" name="id" id="saveas_id" />
        </li>
      </ul>
    </fieldset>
    <div class="save_cancel clearfix">
      <button type="submit" class="save_button float_right">Save As</button>
      <a class="close">Cancel</a>
    </div>
  </form>
</div>
<!-- END Save Document as -->

<div class="dialog join_cluster" id="join_cluster_dialog" title="Add Server">
  <!-- Join cluster -->
  <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>
    <fieldset>
      <ul>
        <li>
          <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>
        </li>
      </ul>
    </fieldset>
    <fieldset>
      <legend>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>
      </legend>
      <ul>
        <li>
          <label class="label" for="user_inp">Username:</label>
          <input type="text" class="inp" name="user" id="user_inp" />
        </li>
        <li>
          <label class="label" for="password_inp">Password:</label>
          <input type="password" class="inp" name="password" id="password_inp" />
        </li>
      </ul>
    </fieldset>
    <div class="save_cancel clearfix">
      <button type="submit" class="save_button float_right">Add Server</button>
      <a class="close">Cancel</a>
    </div>
  </form>
  <!-- END join cluster -->
</div>
<!--  eject confirmation dialog -->
<div class="dialog" id="eject_confirmation_dialog" title="Confirm Server Removal">
  <div class="lbox">
    <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 -->
<!-- failover confirmation dialog -->
<div class="dialog" id="failover_confirmation_dialog" title="Confirm Node Fail Over">
  <div class="lbox">
    <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
          does not yet have replica (backup) copies! 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> – There are not replica (backup) copies of all data
          on this node! 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 failover 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>
<!-- END Leave cluster -->
<!--  delete designdoc confirmation dialog -->
<div class="dialog" id="delete_designdoc_confirmation_dialog" title="Delete Design Document">
  <div class="lbox">
    <div class="content">
      <div class="pas_20">
        <div class="warning pat_20">
          <strong>Warning</strong> &ndash; The views contained in this Design Document will no longer be accessible. Are you sure you want to remove this Design Document?
        </div>
      </div>
      <div class="right save_cancel pas_20 footer_bg">
        <button type="submit" class="save_button float_right">Delete</button>
        <a class="close float_right">Cancel</a>
      </div>
    </div>
  </div>
</div>
<!-- END delete designdoc confirmation dialog -->
<!-- copy design doc dialog -->
<div class="dialog bucket_details" id="copy_designdoc_dialog" title="Copy Design Document" style="width:30em">
  <form>
    <div class="clearfix">
      <label for="copy_ddoc_ddoc_name" class="bolder">Document Name:</label>
      <div style="width:20em; margin: 8px 0; padding: 0 5px; border: 1px solid #CCD3D7;background-color:white;font-size:13px;line-height:normal;">
      <table style="margin:0;padding:0;border:0;width:260px;">
        <tr><td><label for="copy_ddoc_ddoc_name" style="line-height:inherit;">_design/dev_</label></td>
        <td style="width:2000px;"><input id="copy_ddoc_ddoc_name" name="ddoc_name" style="width:100%;border:0;padding:0;font-family:inherit;color:inherit;"></td></tr>
      </table></div>
       <p><strong>NOTE:</strong> Development Mode (_design/dev_) provides the opportunity to edit and test
       your map/reduce views against a subset of data&mdash;without overloading the cluster.</p>
    </div>
    <div class="save_cancel">
      <button class="save_button float_right" type="submit">Copy</button>
      <a class="close">Cancel</a>
    </div>
  </form>
</div>
<!-- END copy design doc -->
<!-- copy view dialog -->
<div class="dialog bucket_details" id="copy_view_dialog" title="Copy View" style="width:30em">
  <span class="warning pat_10" style="display:none;"></span>
  <form>
    <div class="clearfix" style="padding-top:15px">
       <label class="bolder">Design Document Name:</label>
       <div style="width:20em; margin: 8px 0; padding: 0 5px; border: 1px solid #CCD3D7;background-color:white;font-size:13px;line-height:normal;">
       <table style="margin:0;padding:0;border:0;width:260px;">
         <tr><td><label for="copy_view_ddoc_name" style="line-height:inherit;">_design/dev_</label></td>
         <td style="width:2000px;"><input id="copy_view_ddoc_name" name="designdoc_name" style="width:100%;border:0;padding:0;font-family:inherit;color:inherit;" /></td></tr>
       </table></div>
       <label class="bolder">View Name:</label>
       <input name="view_name" class="view_name" value="??" />
    </div>
    <div class="save_cancel">
      <button class="save_button float_right" type="submit">Save</button>
      <a class="close">Cancel</a>
    </div>
  </form>
</div>
<!-- END copy view dialog -->
<!-- </div> --> <!-- #container -->
<!-- About -->
<div class="dialog" id="about_server_dialog">
  <div class="lbox">
    <div class="config-top">
      <img src="images/couchbase_logo.png" alt="Couchbase Logo" />
      <h1>About Couchbase Server</h1>
    </div>
    <div class="center">
      <p class="dialog-text" id="about_versions"></p>
      <p class="dialog-text">Cluster State ID: <span id="cluster_state_id"></span></p>
    </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 -->

<!-- Create Cluster Reference -->
<div class="dialog join_cluster" id="create_cluster_reference_dialog" title="Create Cluster Reference" style="width:500px">
  <div class="warning pat_10" id="create_cluster_reference_dialog_errors_container"></div>
  <script id="create_cluster_reference_dialog_errors_template" type="text/html">
    <!-- {% _.each(rows, function (e) { %} -->
    <strong>Attention</strong> - {%= h(e) %}<br>
    <!-- {% }); %} -->
  </script>
  <form>
    <fieldset>
      <ul>
       <li><label for="cluster_reference_name">Cluster Name:</label>
         <input name="name" id="cluster_reference_name" /></li>
       <li><label for="cluster_reference_hostname">IP/hostname:</label>
         <input name="hostname" id="cluster_reference_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 node in the cluster you want
             to add.
           </span></span>
         </a>
       </ul>
     </fieldset>
     <fieldset>
     <legend>Security
       <a class="text_11 tooltip"><span>What's this?</span>
         <span class="tooltip_msg"><span>
           These are the login credentials for the remote cluster.
         </span></span>
       </a>
     </legend>
     <ul>
       <li><label>Username:</label>
         <input name="username" /></li>
       <li><label>Password:</label>
         <input name="password" type="password" /></li>
     </ul>
    </fieldset>
    <div class="save_cancel">
      <button class="save_button float_right" type="submit">Save</button>
      <a class="close">Cancel</a>
    </div>
  </form>
</div>
<!-- END Create Cluster Reference -->

<!-- Create Replication -->
<div class="dialog join_cluster" id="create_replication_dialog" title="Create Replication" style="width:600px">
  <div class="warning pat_10" id="create_replication_dialog_errors_container" style="line-height: 18px;"></div>
  <script id="create_replication_dialog_errors_template" type="text/html">
    <!-- {% _.each(rows, function (e) { %} -->
    <strong>Attention</strong> - {%= h(e) %}<br>
    <!-- {% }); %} -->
  </script>
  <form>
    <fieldset></fieldset>
      <fieldset style="float:left;">
        <legend>Replicate changes from:</legend>
        <ul>
          <li><label>Cluster:</label>
            <span style="font-size: 0.7em;font-weight: bold;margin-left: 0.2em;">this cluster</span>
          </li>
          <li><label for="replication_from_bucket">Bucket:</label>
            <select name="fromBucket" id="replication_from_bucket"></select>
          </li>
         </ul>
       </fieldset>
       <fieldset style="float:left;clear:right">
         <legend>To:</legend>
         <ul>
           <li><label for="replication_to_cluster">Cluster:</label>
             <select name="toCluster" id="replication_to_cluster">
               <option>remote cluster list</option>
             </select>
           </li>
           <li><label for="replication_to_bucket">Bucket:</label>
             <input name="toBucket" id="replication_to_bucket" />
             <!-- TODO: this needs to become a select box like the one above -->
           </li>
         </ul>
       </fieldset>
     </fieldset>
     <fieldset style="margin-left:4em;clear:both">
     <ul>
       <li><input name="replicationType" type="radio" value="one-time" id="replication_rate_one_time" /><label for="replication_rate_one_time">One-time</label></li>
       <!-- <li><input name="replicationType" type="radio" id="replication_type_scheduled" />
         <label for="replication_type_scheduled">Scheduled</label>
         <ul>
           <li style="font-size:12px">
             <label>Begin <input type="radio" name="when" /> now</label> <span style="color:#777">OR</span>
             <label><input type="radio" name="when" /> at</label>
             <input type="number" placeholder="HH" name="when_hour" />:<input type="number" placeholder="MM" name="when_minutes" />
             <select name="timezone">
               <option>PDT</option>
             </select>
           </li>
           <li style="font-size:12px">and <label>Run
             <select name="frequency">
               <option>once</option>
               <option>every half hour</option>
               <option>hourly</option>
               <option>daily</option>
               <option>weekly</option>
             </select></label>
           </li>
         </ul>
       </li> -->
       <li><input name="replicationType" value="continuous" type="radio" id="replication_rate_continous" /><label for="replication_rate_continous">Continous</label></li>
     </ul>
    </fieldset>
    <div class="save_cancel">
      <button class="save_button float_right replicate-button" type="submit" style="margin-left:12px;">Replicate</button>
      <a class="close">Cancel</a>
    </div>
  </form>
</div>
<!-- END Create Replication -->

<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 class="logo"> </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>
    <form id="login_form" class="form block">
      <fieldset>
        <ul>
          <li>
            <label for="login_inp">Username:</label>
            <input type="text" name="login" id="login_inp" class="inp" />
          </li>
          <li>
            <label for="password2_inp">Password:</label>
            <input type="password" name="password" id="password2_inp" class="inp" />
          </li>
        </ul>
        <input type="submit" value="Sign In" class="submit" />
      </fieldset>

      <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>
<!-- END auth_block -->
<div class="init_block" id="init_block">

  <div class="pad" id="init_welcome_dialog">
    <div class="pad-header">
      <img class="logo" src="images/logo_large.png" alt="Couchbase logo" />
      <div class="tagline">
        Simple. Fast. Elastic.
      </div>
    </div>
    <form id="init_welcome_form" class="clearfix">
      <div class="version" style="display:none;"><span class="couchbase-version"></span></div>
      <input type="image" name="setup" alt="Setup" class="submit next focusme" src="images/welcome-setup-button.png" />
    </form>
    <div class="welcome-footer">
      Copyright &copy; 2012 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 5</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;">

          <div>
            <label for="setup_db_path_input">Databases Path:</label>
            <input type="text" name="db_path"
                   id="setup_db_path_input" class="path-box" />
            <br class="clear" />
          </div>

          <div>
            <label>Free:</label>
            <span style="font-size:10pt; margin-left:5px; line-height: 25px;"
                  class="total-db-size">---</span>
          </div>

          <div>
            <label for="setup_index_path_input">Indices Path:</label>
            <input type="text" name="index_path"
                   id="setup_index_path_input" class="path-box" />
            <br class="clear" />
          </div>

        <div>
          <label>Free:</label>
          <span style="font-size:10pt; margin-left:5px; line-height: 25px;"
                class="total-index-size">---</span>
        </div>

        </form>

      </div>
      <div class="warning pat_10 init_cluster_dialog_errors_container" style="display:none;"></div>
    </div>
    <h2 class="question">Join Cluster / Start new Cluster</h2>
    <p class="pad_10">
    If you want to add this server to an existing Couchbase Cluster, select "Join a
    cluster now".
    Alternatively, you may create a new Couchbase 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 Couchbase Cluster. This value will
    be inherited by all servers subsequently joining the cluster, so please set
    appropriately.
    </p>
    <form id="init_cluster_form" class="form block"><input type="submit" style="width:0px; height: 0px;">
      <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>
         <div class="warning pat_10" id="init_cluster_dialog_memory_errors_container" style="display:none;"></div>
      </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 bucket_details really" id="init_bucket_dialog">
    <div class="config-top">
      <h1>Create Default Bucket</h1>
      <h2>Step <span class="current-step">3</span> of 5</h2>
    </div>
    <form><div class="clearfix">
      <h2>Bucket Settings</h2>
      <div class="bucket-icon"></div>
      <label class="for-name"><span>Bucket Name:</span> <strong>default</strong></label>
      <div class="for-bucket-type"><span>Bucket Type:</span>
       <label><input type="radio" name="bucketType" value="membase"> Couchbase</label>
       <label><input type="radio" name="bucketType" value="memcached"> Memcached</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>Replicas</h2>
        <label class="for-enable-replicas"><input type="checkbox" checked disabled><span>Enable </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>
        <input type="hidden" name="replicaIndex" value="0"/>
        <label style="padding-left: 20px; clear:both;"><input type="checkbox" name="replicaIndex" value="1" style="margin-right:5px;"/>Index replicas</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="pad" id="init_update_notifications_dialog"><form>
    <div class="config-top">
      <h1>Notifications</h1>
      <h2>Step <span class="current-step">4</span> of 5</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" tabindex="-1">What's this?</a>
    </p>
    <p class="more_info pad_10">
      Enabling software update notifications allows notification in the Couchbase web console when a new version of Couchbase Server is available. Configuration information transferred in the update check is anonymous and does not include any stored key-value data.
    </p>
    <div class="when-community">
      <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>
    </div>
    <div class="when-enterprise">
      <h2 class="question">Register and <span style="color: #83B817;">plant a tree</span>
        <span class="text_11 tooltip wider_tooltip"><span>What's this?</span>
          <span class="tooltip_msg"><span>Couchbase is proud to partner with <a href="http://www.mokugift.com/" target="_blank" style="color: #83B817;">Mokugift.com</a> to help restore tree cover in depleted lands.<br><br>Once you register your software using your full contact details, look for an e-mail from us that includes a link for choosing and planting your tree.</span></span>
        </span></h2>
      <p class="pad_10 clearfix"><img style="float: left; width:48px; height:53px; margin-right:6px;" src="images/no-preload/mokugift-tree.gif" />Register your Enterprise Edition of Couchbase Server with your full contact details and we’ll plant a tree. It’s as simple as that.</p>
    </div>
    <div class="pad_10 warn" style="color:#EC5223;font-family:Verdana, Helvetica, Sans-Serif; font-size:10pt; font-weight:lighter; line-height:20px; margin-left:75px; width:500px;" id="update_notifications_errors_container"></div>
    <script type="text/html" id="update_notifications_errors_template">
      <ul>
      <!-- {% _.each(rows, function (errorMsg) { %} -->
        <li>{%= h(errorMsg) %}</li>
      <!-- {% }); %} -->
      </ul>
    </script>
    <p class="pad_10">
      <label for="init-join-community-email">
        <span class="field-label">Email:</span>
        <input id="init-join-community-email">
        <span class="when-required" style="color:red;">*</span>
        <span class="error-container err-name"></span>
      </label>
    </p>
    <p class="pad_10">
      <label for="init-join-community-firstname">
        <span class="field-label">First name:</span>
        <input id="init-join-community-firstname">
        <span class="when-required" style="color:red;">*</span>
        <span class="error-container err-firstname"></span>
      </label>
    </p>
    <p class="pad_10">
      <label for="init-join-community-lastname">
        <span class="field-label">Last name:</span>
        <input id="init-join-community-lastname">
        <span class="when-required" style="color:red;">*</span>
        <span class="error-container err-lastname"></span>
      </label>
    </p>
    <p class="pad_10">
      <label for="init-join-community-company">
        <span class="field-label">Company:</span>
        <input id="init-join-community-company">
        <span class="when-required" style="color:red;">*</span>
        <span class="error-container err-company"></span>
      </label>
    </p>
    <p class="when-enterprise pad_10">
      <label for="init-join-tree"><input type="checkbox" id="init-join-tree"> <span>Yes, please plant my tree!</span></label><br />
      <label for="init-join-terms"><input type="checkbox" id="init-join-terms">
        <span>I agree to the <a href="http://www.couchbase.com/agreement/free-license" target="_blank">terms and conditions</a> associated with this product. <span style="color:red">*</span></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>
  </form></div>
  <!-- END init_update_notifications-->
  <div class="pad" id="init_sample_buckets_dialog"><form>
    <div class="config-top">
      <h1>Sample Buckets</h1>
      <h2>Step <span class="current-step">2</span> of 5</h2>
    </div>
    <h2 class="question">Sample Data and MapReduce</h2>
    <p class="pad_10">
      Sample buckets are available to demonstrate the power of Couchbase Server.
      These samples contain data and sample MapReduce queries.
    </p>
    <h3>Installed Samples</h3>
    <ul id="setup_installed_samples"></ul>
    <h3>Available Samples</h3>
    <ul id="setup_available_samples"></ul>
    <div class="config-bottom">
      <button name="next" value="Next" class="submit next direction-button" id="step-4-next" 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_sample_buckets_dialog -->
  <div class="pad" id="init_secure_dialog">
   <div class="config-top">
      <h1>Configure Server</h1>
      <h2>Step <span class="current-step">5</span> of 5</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-5-finish" type="submit">Next</button>
      <button name="back" value="Back" class="submit back direction-button" id="step-5-back" type="button">Back</button>
    </div>
    </form>
  </div>
  <!-- END init_secure_block -->
</div>
<!-- END init_block -->
<script id="notice_template" type="text/html">
<div class="shadow_box notice">
    <h2 class="header_2">Couchbase 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>
</script>
<script id="noticeErr_template" type="text/html">
<div class="shadow_box notice">
    <h2 class="header_2">Couchbase 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>
</script>

<!--[if IE]><script language="javascript" type="text/javascript" src="js/excanvas.min.js"></script><![endif]-->
<script src="js/jquery.js"></script>
<script>
$(function() {
  if ($.browser.mozilla) {
    $('body').addClass('firefox');
  }
});
</script>
<script src="js/jquery-ui.custom.js"></script>
<script src="js/jquery.flot.js"></script>
<script src="js/jquery.sparkline.js"></script>
<script type="text/javascript" src="js/jquery.selectBox.js"></script>
<script src="js/jquery.ba-bbq.js"></script>
<!--[if lt IE 9]>
<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/futon.format.js"></script>
<script src="js/codemirror/codemirror.js"></script>
<script src="js/codemirror/javascript.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/views.js"></script>
<script src="js/replications.js"></script>
<script src="js/documents.js"></script>
<script src="js/overview.js"></script>
<script src="js/all-images.js"></script>
<script src="js/global_progress.js"></script>
<script src="js/app.js"></script>
</body>
</html>
