<script id="database_list-template" type="text/x-handlebars-template">
    <div id="table-list">
        <div class="actions-bar">
            <button class="btn add-database">+ Add Database</button>
            <button class="btn add-namespace">+ Add Table</button>
            <button class="btn for-multiple-elements remove-namespace" disabled="disabled">&ndash; Delete selected tables</button>
        </div>
        <h1 class="title">Tables in the cluster</h1>
        <div id="user-alert-space"></div>
        <div class="alert user_alert_space-cannot_create_namespace">You need to create a database before creating a table.</div>
        <div class="collapsible-list"></div>
    </div>
</script>

<script id="need_database-alert-template" type="text/x-handlebars-template">
You need to create a database before creating a table.
</script>

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

<script id="database_list_element-summary-template" type="text/x-handlebars-template">
    <div class="element-type">Database</div>
    <h3 class="name"><a href="#databases/{{id}}">{{name}}</a></h3>
    <div class="buttons">
        <!-- <button class="btn hide-tables expanded collapse-control" data-expanded="&ndash; Hide Tables" data-collapsed="+ Show Tables">&ndash; Hide Tables</a> -->
        <button class="btn remove-database" data-id={{id}}>Delete Database</a>
    </div>
</script>

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

<script id="namespace_list_element-template" type="text/x-handlebars-template">
    <div class="checkbox-container">
        <input type="checkbox" id="checkbox_table_list_{{id}}"></input><label for="checkbox_table_list_{{id}}"></label>    
    </div>
    <div class="element-details">
        <p class="name"><a href="#tables/{{id}}">{{name}}</a></p>
        <p class="quick_info">
            {{nshards}} {{pluralize_noun "shard" nshards}}, {{nreplicas}} {{pluralize_noun "replica" nreplicas}}
        </p>
        <div class="status">
            {{humanize_namespace_reachability reachability}}
        </span>
    </div>
</script>

<script id="add_database-modal-template" type="text/x-handlebars-template"> 
    <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_database-alert-template" type="text/x-handlebars-template">
    <div class="alert displayed_alert">
        <a class="close" href="#">&times;</a>
        <p>You successfully added database <a href="#databases/{{id}}">{{name}}</a>.</p>
    </div>
</script>

<script id="add_namespace-modal-template" type="text/x-handlebars-template">
    <form class="form">
        <label for="name">Name</label>
        <input class="xlarge" id="focus_namespace_name" name="name" size="30" type="text" />

        <label for="primary_datacenter">Select a database</label>
        <select class="database" name="database">
            {{#each databases}}
            <option value="{{this.id}}">{{this.name}}</option>
            {{/each}}
        </select>

        <p class="show_advanced_settings-link_container"><a href="#" class="show_advanced_settings-link">Show optional settings</a></p>
        <p class="hide_advanced_settings-link_container"><a href="#" class="hide_advanced_settings-link">Hide optional settings</a></p>

        <div class="advanced_settings">
            <label for="name">Primary key</label>
            <input class="xlarge" name="primary_key" size="30" type="text" placeholder="id"/>
            <label for="name">Cache size in MB</label>
            <input class="xlarge" name="cache_size" size="30" type="text" placeholder="1024"/>
            <label for="name">Acknowledge writes only when written to disk</label>
            <div class="toggle-primary">
                <div class="switch">
                    <input type="radio" class="switch-input" name="write_disk" value="yes" id="write_disk_yes" checked>
                    <label for="write_disk_yes" class="switch-label switch-label-off">Yes</label>
                    <input type="radio" class="switch-input" name="write_disk" value="no" id="write_disk_no">
                    <label for="write_disk_no" class="switch-label switch-label-on">No</label>
                    <span class="switch-selection"></span>
                </div>
            </div>
        </div>
    </form>
</script>

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

<script id="remove_namespace-modal-template" type="text/x-handlebars-template">
    <div class="alert alert-error displayed_alert">Deleting a table will delete all its data. This action cannot be reversed.</div>
    <div class="alert alert-error error_answer"></div>
    <h4>Are you sure you want to delete these tables:</h4>
    <ul class="namespace-list">
        {{#each namespaces}}
        <li><a href="#tables/{{id}}">{{name}}</a></li>
        {{/each}}
    </ul>
</script>

<script id="removed_namespace-alert-template" type="text/x-handlebars-template">
    <div class="alert displayed_alert">
        <a class="close" href="#">&times;</a>
        <p>The {{pluralize_noun "table" num_deleted_namespaces}} <span class="name">{{comma_separated_simple deleted_namespaces}}</span> {{pluralize_verb_to_have num_deleted_namespaces}} been deleted.</p>
    </div>
</script>
