<div id="home-page" data-role="page" class="ui-page-active" data-theme="c">

    <div data-role="header" data-theme="b">

        <h1>mist.io</h1>
        {{view Mist.userMenuView}}

    </div>

    <div data-role="content" data-theme="c">

        <a id="add-backend-btn"
           data-role="button"
           data-iconpos="right"
           data-icon="plus"
           data-theme="d"
           {{action "addBackend" target="view"}}>Add backend</a>

        <div id="backend-buttons" data-role="controlgroup" data-type="horizontal">
            {{#each Mist.backendsController.content}}
                {{view Mist.backendButtonView
                       backendBinding="this"
                       classBinding="state"
                       data-icon="check"}}
            {{/each}}
        </div>

        <ul data-role="listview" data-inset="true">
            <li>
                {{#link-to "machines"}}Machines
                    {{#if Mist.backendsController.loadingMachines}}
                    <div class="ajax-loader"></div>
                    {{/if}}
                    <span class="ui-li-count">{{Mist.backendsController.machineCount}}</span>
                {{/link-to}}
            </li>
            
            <li>
                {{#link-to "images"}}Images
                    {{#if Mist.backendsController.loadingImages}}
                    <div class="ajax-loader"></div>
                    {{/if}}
                    <span class="ui-li-count">{{Mist.backendsController.imageCount}}</span>
                {{/link-to}}
            </li>

            <li>
                {{#link-to "keys"}}Keys
                    {{#if Mist.keysController.loading}}
                    <div class="ajax-loader"></div>
                    {{/if}}
                    <span class="ui-li-count">{{Mist.keysController.content.length}}</span>
                {{/link-to}}
            </li>
        </ul>
    </div>

    {{view Mist.backendAddView}}

    {{view Mist.backendEditView}}

</div>
