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

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

        <a href="#" class="responsive-button" data-icon="home">Home</a>

        <h1>Machines</h1>

        {{view Mist.userMenuView}}

    </div>

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

        <a id="create-machine-btn"
           class="responsive-button"
           data-role="button"
           data-icon="plus"
           data-iconpos="right"
           data-theme="d"
           {{action "createClicked" target="view"}}>Create</a>
          
        <a id="select-machines-btn"
           class="responsive-button"
           data-role="button"
           data-icon="arrow-d"
           {{action "selectClicked" target="view"}}>Select</a>

        <ul id="machines" 
            data-role="listview" 
            data-inset="true" 
            data-filter="true" 
            data-filter-placeholder="Filter..."
            data-theme="c"
            class="checkbox-list">
            {{#each Mist.backendsController}}
                {{#each this.machines}}
                    {{view Mist.machineListItemView machineBinding="this" class="checkbox-link"}}
                {{/each}}
            {{/each}}
        </ul>

        <div class="mid-padding"></div>

    </div>

    {{view Mist.machineAddView}}

    {{view Mist.machineTagsView}}

    {{view Mist.machineShellView}}

    {{view Mist.machinePowerView}}

    {{view Mist.confirmationDialog}}

    <div id="select-machines-popup" data-role="popup" data-overlay-theme="b" data-transition="flip" data-position-to="#select-machines-btn">
        <ul data-role="listview">
            <li data-icon="false">
                <a {{action "selectionModeClicked" "all" target="view"}}>All</a>
            </li>
            <li data-icon="false">
                <a {{action "selectionModeClicked" "none" target="view"}}>None</a>
            </li>
            {{#each Mist.backendsController.content}}
            <li data-icon="false">
                <a {{action "selectionModeClicked" this.title target="view"}}>{{this.title}}</a>
            </li>
            {{/each}}
        </ul>
    </div>

    <div class="tri-action-footer" data-role="footer" data-theme="b">
        <table><tbody><tr><td>
            <a id="machines-tags-btn" data-role="button" data-icon="grid" {{action "tagsClicked" target="view"}}>Tags</a>
        </td><td>
            <a id="machines-shell-btn" data-role="button" data-icon="gear" {{action "shellClicked" target="view"}}>Shell</a>
        </td><td>
            <a id="machines-power-btn" data-role="button" data-icon="power" {{action "powerClicked" target="view"}}>Power</a>
        </td></tr></tbody></table>
    </div>

</div>
