<div id="image-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>Images</h1>

        {{view Mist.userMenuView}}

    </div>

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

        {{#if Mist.backendsController.loadingImages}}
            <div class="ajax-loader"></div>
        {{/if}}

        {{view Mist.TextField
               id="search-term-input"
               placeholder="Search images ..."
               valueBinding="Mist.imageSearchController.searchTerm"}}

        {{#if Mist.imageSearchController.isSearching}}
            <div class="ajax-loader"></div>
        {{/if}}

        <ul id="image-list"
            data-role="listview"
            data-inset="true"
            class="checkbox-list">
            {{#each view.renderedImages}}
                {{view Mist.imageListItemView imageBinding="this" class="checkbox-link" }}
            {{/each}}
        </ul>

        {{#if view.renderingMoreImages}}
            <div class="ajax-loader"></div>
        {{/if}}

        <button id="images-advanced-search" data-theme="b" {{action "searchClicked" target="view"}}>
            <span>
                {{#if view.searchingImages}}
                    Please wait...
                {{else}}
                    Continue search on server...
                {{/if}}
            </span>
        </button>

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

    </div>

    {{view Mist.machineAddView}}

</div>