<script id="sidebar-container-template" type="text/x-handlebars-template">
    <div class="container">
        <div class="cluster-status row">
            <div class="span3 client-connection-status"></div>
            <div class="span3 issues"></div>
            <div class="span3 servers-connected"></div>
            <div class="span3 datacenters-connected"></div>
        </div>
    </div>
    <div class="issues-banner"></div>
    <div class="all-issues"></div>
</script>

<script id="sidebar-client_connection_status-template" type="text/x-handlebars-template">
    <div class="panel {{#if disconnected}}error{{/if}}">
        {{#if disconnected}}
        <h4>Disconnected</h4>
        {{else}}
        <h5>Connected to</h5>
        <h4 title={{machine_name}}>{{machine_name}}</h4>
        {{/if}}
    </div>
</script>

<script id="sidebar-issues-template" type="text/x-handlebars-template">
    <div class="panel {{#if num_issues}}error{{/if}}">
        <h5>Issues</h5>
        {{#if num_issues}}
            <div class="error"></div>
            <h4>{{num_issues}} {{pluralize_noun "issue" num_issues}}</h4>
        {{else}}
            <h4>No issues</h4>
        {{/if}}
    </div>
</script>

<script id="sidebar-issues_banner-template" type="text/x-handlebars-template">
    {{#if show_banner}}
    <div class="show-issues-banner {{#if no_issues}}no-issues{{/if}}">
            <div class="gradient-overlay {{#if no_issues}}no-issues{{/if}}">
                <div class="container">
                    {{#unless no_issues}}
                        <button class="btn btn-resolve-issues show-issues">Resolve issues</button>
                        <button class="btn btn-resolve-issues hide-issues">Hide issues</button>
                    {{/unless}}
                    {{#if no_issues}}
                        <p class="message">All issues have been successfully resolved.</p>
                    {{else}}
                        <p class="message"><strong>{{num_issues}} {{pluralize_noun "issue" num_issues}}</strong> {{pluralize_verb "need" num_issues}} to be resolved</p>
                    {{/if}}
                </div>
            </div>
        </div>
    {{/if}}
</script>

<script id="sidebar-servers_connected-template" type="text/x-handlebars-template">
    <div class="panel {{#if servers_not_reachable}}error{{/if}}">
        <h5>Servers</h5>
        <h4>{{servers_active}}/{{servers_total}} reachable</h4>
    </div>
</script>

<script id="sidebar-datacenters_connected-template" type="text/x-handlebars-template">
    <div class="panel {{#if datacenters_not_reachable}}error{{/if}}">
        <h5>Datacenters</h5>
        <h4>{{datacenters_active}}/{{datacenters_total}} reachable</h4>
    </div>
</script>

<script id="sidebar-dataexplorer_container-template" type="text/x-handlebars-template">
    <div class="section cluster-status">
        <div class="issues"></div>
    </div>
    <div class="section last">
        <h3>Quick queries</h3>
        <h4>Previous queries</h4>
        {{#if has_previous_queries}}
        <ul class="queries_list">
            {{#each previous_queries}}
            <li class="constrained_li"><a href="#{{this}}" class="old_query" data-query="{{query}}">{{query_summary}}</a></li>
            {{/each}}
        </ul>
        {{else}}
        <p class="no_query">No previous queries.</p>
        {{/if}}

        {{#if has_namespaces}}
        {{#each databases}}
        <h4>{{name}}</h4>
        <ul class="queries_list">
            {{#each namespaces}}
            <li class="constrained_li"><a href="#" data-database="{{database}}" data-name="{{name}}" class="namespace_query">{{name}}</a></li>
            {{/each}}
        </ul>
        {{/each}}
        {{else}}
        <p class="no_query">There is no table available. <br />Start by <a href="#tables">creating one</a>.</p>
        {{/if}}
    </div>
</script>
