<div data-role="header">

    <h1>mist.io</h1>

    {{view Mist.UserMenuView}}

</div>

<div data-role="content">

    {{view Mist.BackendAddView}}

    <div data-role="controlgroup" data-type="horizontal" id="backend-buttons">
        {{#each Mist.backendsController}}
            {{view Mist.BackendButtonView backendBinding="this" data-theme="c"
               data-inline="true" data-role="button" data-icon="check"
               classBinding="state" class="backend-button"}}
        {{/each}}
    </div>
    {{view Mist.EditBackendView backendBinding="Mist.backend"}}

    <ul data-role="listview"
        data-theme="c"
        data-dividertheme="d"
        class="ui-listview ui-listview-inset ui-corner-all ui-shadow"
        id="home-menu">
        <li>
            {{#linkTo machines}}Machines
                {{#view Mist.CountView
                    numberBinding="Mist.backendsController.machineCount"
                    tagName="span"
                    class="ui-li-count"}}
                    {{view.number}}
                {{/view}}
            {{/linkTo}}
        </li>
        <li>
            {{#linkTo images}}Images
                {{#view Mist.CountView
                    numberBinding="Mist.backendsController.imageCount"
                    tagName="span"
                    class="ui-li-count"}}
                    {{view.number}}
                {{/view}}
            {{/linkTo}}
        </li>
        <li>
            {{#linkTo keys}}Keys
                {{#view Mist.CountView
                    numberBinding="Mist.keysController.content.length"
                    tagName="span"
                    class="ui-li-count"}}
                    {{view.number}}
                {{/view}}
            {{/linkTo}}
        </li>
    </ul>

</div>
