<a href="#"
    id="mist-create-machine"
    class="add-button"
    data-theme="b"
    data-role="button"
    data-icon="plus"
    data-iconpos="right"
    {{action openMachineAddDialog target="view"}}>Create</a>

<div class="mist-dialog dialog-add" data-role="panel" data-position="right" data-display="overlay" data-theme="b">
    <div data-role="header">
        <h1>Create Machine</h1>
    </div>
    <div data-role="content">
        <label for="create-machine-name">1. Name:</label>
        {{view Mist.TextField
            valueBinding="Mist.machineAddController.newMachineName"
            name="create-machine-name"
            id="create-machine-name"}}

        <label for="createmachine-select-provider">2. Provider:</label>
        <div class="select-provider-collapsible ui-disabled" data-role="collapsible" data-iconpos="right" data-corners="true"
            data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u">
            <h2>Select Provider</h2>
            <ul class="select-listmenu" data-role="listview" data-divider-theme="d" data-corners="true">
                {{#each Mist.backendsController}}
                <li data-icon="false" data-corners="true">
                    <a href="#" {{bindAttr title="title"}} 
                                {{action selectProvider this target="view"}}>{{this.title}}</a>
                </li>
                {{/each}}
            </ul>
        </div>
            
        <label for="createmachine-select-image">3. Image:</label>
        <div class="select-image-collapsible ui-disabled" data-role="collapsible" data-iconpos="right" data-corners="true"
            data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u">
            <h2>Select Image</h2>
            <ul class="select-listmenu" data-role="listview" data-divider-theme="d" data-corners="true">
                {{#each Mist.machineAddController.newMachineBackend.images}}
                <li data-icon="false" data-corners="true">
                    <a href="#" {{bindAttr title="name"}} 
                                {{action selectImage this target="view"}}>{{this.name}}</a>
                </li>
                {{/each}}
            </ul>
        </div>
        
        <label for="createmachine-select-size">4. Size:</label>
        <div class="select-size-collapsible ui-disabled" data-role="collapsible" data-iconpos="right" data-corners="true"
            data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u">
            <h2>Select Size</h2>
            <ul class="select-listmenu" data-role="listview" data-divider-theme="d" data-corners="true">
                {{#each Mist.machineAddController.newMachineBackend.sizes}}
                <li data-icon="false" data-corners="true">
                    <a href="#" {{bindAttr title="name"}} 
                                {{action selectSize this target="view"}}>{{this.name}}</a>
                </li>
                {{/each}}
            </ul>
        </div>

        <label for="createmachine-select-location">5. Location:</label>
        <div class="select-location-collapsible ui-disabled" data-role="collapsible" data-iconpos="right" data-corners="true"
            data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u">
            <h2>Select Location</h2>
            <ul class="select-listmenu" data-role="listview" data-divider-theme="d" data-corners="true">
                {{#each Mist.machineAddController.newMachineBackend.locations}}
                <li data-icon="false" data-corners="true">
                    <a href="#" {{bindAttr title="name"}} 
                                {{action selectLocation this target="view"}}>{{this.name}}</a>
                </li>
                {{/each}}
            </ul>
        </div>        

        <label for="createmachine-select-key">6. Key:</label>
        {{#if Mist.keysController}}
        <div class="select-key-collapsible ui-disabled" data-role="collapsible" data-iconpos="right" data-corners="true"
            data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u">
            <h2>Select Key</h2>
            <ul class="select-listmenu" data-role="listview" data-divider-theme="d" data-corners="true">
                {{#each Mist.keysController}}
                <li data-icon="false" data-corners="true">
                    <a href="#" {{bindAttr title="name"}} 
                                {{action selectKey this target="view"}}>{{this.name}}</a>
                </li>
                {{/each}}
            </ul>
        </div>
        {{else}}
        <div class="generate-key-collapsible ui-disabled" data-role="collapsible" data-iconpos="right" data-corners="true"
            data-collapsed-icon="gear">
            <h2><div class="ajax-loader"></div> Generate Key</h2>
        </div>        
        {{/if}}

        <label for="create-machine-script">7.Script:</label>
        {{view Mist.TextField
            valueBinding="Mist.machineAddController.newMachineScript"
            name="create-machine-script"
            id="create-machine-script"}}

        <!--div class="cost">Cost: {{Mist.machineAddController.newMachineCost}}</div-->

        <div class="btn-full ok-cancel" data-role="controlgroup" data-type="horizontal">
            <button id="create-machine-cancel" data-theme="c" {{action backClicked target="view"}}>Back</button>
            <button id="create-machine-ok" data-theme="b" disabled="disabled"  {{action newMachineClicked target="view"}}>Launch!</button>
        </div>
    </div>
</div>
