<script id="server_list-template" type="text/x-handlebars-template">
    <div id="server-list">
        <div class="actions-bar">
            <button class="btn add-datacenter">+ Add Datacenter</button>
            <button class="btn for-multiple-elements set-datacenter" disabled="disabled">Set Datacenter</button>
        </div>
        <h1 class="title">Servers connected to the cluster</h1>
        <div id="user-alert-space-set_datacenter"></div>
        <div id="user-alert-space"></div>
        <div class="datacenters collapsible-list"></div>
        <div class="unassigned-machines collapsible-list"></div>
    </div>
</script>

<script id="datacenter_list_element-template" type="text/x-handlebars-template">
    <div class="section">
        <div class="header_container">
            <div class="datacenter summary"></div>
        </div>
        <div class="element-list-container"></div>
    </div>
</script>

<script id="datacenter_list_element-summary-template" type="text/x-handlebars-template">
    <div class="element-type">Datacenter</div>
    <h3 class="name"><a href="#datacenters/{{id}}">{{name}}</a></h3>
    <div class="buttons">
        <!-- <button class="btn hide-servers expanded collapse-control" data-expanded="&ndash; Hide Servers" data-collapsed="+ Show Servers">&ndash; Hide Servers</a> -->
        <button class="btn remove-datacenter">Delete Datacenter</a>
    </div>
</script>

<script id="unassigned_machines_list_element-template" type="text/x-handlebars-template">
    {{# unless no_machines}}
    <div class="section">
        <div class="header_container">
            <div class="datacenter summary">
                <h3 class="name">Unassigned servers</h3>
                <div class="buttons">
                    <!-- <button class="btn hide-servers expanded collapse-control" data-expanded="&ndash; Hide Servers" data-collapsed="+ Show Servers">&ndash; Hide Servers</a> -->
                </div>
            </div>
        </div>
        <div class="element-list-container"></div>
    </div>
    {{/unless}}
</script>

<script id="machine_list-template" type="text/x-handlebars-template">
    <div class="list"></div>
</script>

<script id="machine_list_element-template" type="text/x-handlebars-template">
    <div class="checkbox-container">
        <input type="checkbox" id="checkbox_machine_list_{{id}}"></input><label for="checkbox_machine_list_{{id}}"></label>    
    </div>
    <div class="element-details">
        <p class="name"><a href="#servers/{{id}}">{{name}}</a></p>
        <p class="quick_info"></p>
        <div class="status"></div>
    </div>
</script>


<script id="machine_list_element-quick_info-template" type="text/x-handlebars-template">
    {{primary_count}} {{pluralize_noun "primary" primary_count}}, {{secondary_count}} {{pluralize_noun "secondary" secondary_count}}
</script>

<script id="machine_list_element-status-template" type="text/x-handlebars-template">
    {{humanize_machine_reachability status}}
</script>

<script id="machine_list_element-summary-template" type="text/x-handlebars-template">
</script>
<script id="add_datacenter-modal-template" type="text/x-handlebars-template"> 
  <div class="alert alert-error error_answer"></div>
  <form class="form">
    <fieldset>
      <div class="clearfix">
        <label for="name">Name</label>
        <div class="input">
          <input class="xlarge focus_new_name" name="name" size="30" type="text" />
        </div>
      </div>
    </fieldset>
  </form>
</script>

<script id="added_datacenter-alert-template" type="text/x-handlebars-template">
  <div class="alert displayed_alert" data-alert="alert">
    <a class="close" href="#">&times;</a>
    <p>You added datacenter <span class="name">{{name}}</span>. You can now <a href="#datacenters/{{uuid}}">configure</a> it further.</p>
  </div>
</script>

<script id="fail_delete_datacenter-template" type="text/x-handlebars-template">
    Sorry, something went wrong. The datacenter might not be up to date, please refresh.
</script>

<script id="remove_datacenter-modal-template" type="text/x-handlebars-template">
  <div class="alert alert-error error_answer"></div>
  <form class="form">
    <div class="alert block-message error">
      <p>
        <strong>Be careful.</strong>
        If you delete these datacenters, all
        replica counts in them will be
        reduced to zero.
      </p>
    </div>
    <p>Are you sure you want to delete the datacenter <a href="#datacenters/{{datacenter.id}}" target="_blank">{{datacenter.name}}</a>?</p>
  </form>
</script>

<script id="removed_datacenter-alert-template" type="text/x-handlebars-template">
    {{debug}}
  <div class="alert displayed_alert" data-alert="alert">
    <a class="close" href="#">&times;</a>
    <p>You successfully deleted datacenter <span class="name">{{name}}</span>.</p>
  </div>
</script>

<script id="set_datacenter-modal-template" type="text/x-handlebars-template">
    {{#if has_warning}}
    <div class="alert alert-error displayed_alert">
        {{#each warnings_by_machines}}
        <p><strong>Server <a href="#servers/{{machine_id}}">{{machine_name}}</a>:</strong></p>

        {{#if namespaces_with_critical_issue}}
        <p>You have just one server left in this datacenter and this server is
        master for the {{pluralize_noun "table" num_namespaces_with_critical_issue}}
        {{links_to_namespaces_inline namespaces_with_critical_issue}}.
        Moving this server will results in a loss of availability unless a new
        server is added to datacenter <a href="#datacenters/{{datacenter_id}}">{{datacenter_name}}</a>, or
        the masters for this table are pinned to another datacenter.</a></p>
        {{else}}
            {{#if namespaces_with_unsatisfiable_goals}}
            <p>The number of replicas for {{pluralize_noun "table" num_namespaces_with_unsatisfiable_goals}}
            {{links_to_namespaces_inline namespaces_with_unsatisfiable_goals}} you
            specified will be lower than the number of servers available in datacenter <a
                href="#datacenters/{{datacenter_id}}">{{datacenter_name}}</a>.
            You can lower the number of replicas required for this table or add a server in this datacenter to avoid creating unsatisfiable goals.</p>
            {{/if}}
        {{/if}}
        {{/each}}
    </div>
    {{/if}}

    <div class="alert displayed_alert">Removing servers from datacenters removes their responsibilities.</div>
    <div class="alert alert-error error_answer"></div>
    <form class="form">
        <fieldset>
            <label for="datacenter_uuid">Select a datacenter</label>
            <div class="clearfix">
                <select class="datacenter_uuid" name="datacenter_uuid">
                    {{#each datacenters}}
                    <option value="{{this.id}}">{{this.name}}</option>
                    {{/each}}
                </select>
            </div>
        </fieldset>
    </form>
</script>

<script id="set_datacenter-alert-template" type="text/x-handlebars-template">
  <div class="alert displayed_alert" data-alert="alert">
    <a class="close" href="#">&times;</a>
    <p>Set datacenter for {{pluralize_noun "server" machine_count}} {{machines_first.name}}{{#each machines_rest}}, {{name}}{{/each}} to {{datacenter_name}}.</p>
  </div>
</script>

<script id="alert_message-template" type="text/x-handlebars-template">
    <div class="alert displayed_alert" data-alert="alert">
        <a class="close" href="#">&times;</a>
        <p>{{print_safe message}}</p>
    </div>
</script>

<script id="cannot_change_datacenter-alert-template" type="text/x-handlebars-template">
    <div id="reason_cannot_change_datacenter" class="alert" data-alert="alert">
    <p>You cannot change the datacenter of the selected machines because:
        <ul>
            {{display_reasons_cannot_move reasons}}
        </ul>
    </p>
  </div>
</script>

<script id="cannot_change_datacenter-alert_content-template" type="text/x-handlebars-template">
    <a class="close" href="#">&times;</a
    <p>You cannot change the datacenter of the selected machines because:
        <ul>
            {{display_reasons_cannot_move reasons}}
        </ul>
    </p>
</script>

