<div id="create-machine-panel"
     data-swipe-close="false"
     class="side-panel"
     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" data-theme="b">

        <!-- Select Name -->

        <label for="create-machine-name">1. Name:</label>
        {{view Mist.TextField
               id="create-machine-name"
               data-theme="a"
               valueBinding="Mist.machineAddController.newMachineName"}}

        <!-- Select Provider -->

        <label>2. Provider:</label>
        <div id="create-machine-provider"
             data-role="collapsible"
             data-iconpos="right"
             data-collapsed-icon="arrow-d"
             data-expanded-icon="arrow-u"
             data-theme="a"
             class="mist-select">
            <h2>{{Mist.machineAddController.newMachineProvider.title}}</h2>
            <ul data-role="listview" data-theme="a">
                {{#each Mist.backendsController.content}}
                    {{#if this.enabled}}
                        {{#unless this.isBareMetal}}
                            <li data-icon="false">
                                <a {{action "selectProvider" this target="view"}}>{{this.title}}</a>
                            </li>
                        {{/unless}}
                    {{/if}}
                {{/each}}
            </ul>
        </div>

        <!-- Select Image -->

        <label>3. Image:</label>
        <div id="create-machine-image"
             data-role="collapsible"
             data-iconpos="right"
             data-collapsed-icon="arrow-d"
             data-expanded-icon="arrow-u"
             data-theme="a"
             class="mist-select">
            <h2>{{Mist.machineAddController.newMachineImage.name}}</h2>
            <ul data-role="listview" data-theme="a">
                {{#each Mist.machineAddController.newMachineProvider.images}}
                    {{#unless Mist.machineAddController.newMachineProvider.images.hasStarred}}
                        <li data-icon="false">
                            <a {{action "selectImage" this target="view"}}>{{this.name}}</a>
                        </li>
                    {{else}} {{#if this.star}}
                        <li data-icon="false">
                            <a {{action "selectImage" this target="view"}}>{{this.name}}</a>
                        </li>
                    {{/if}} {{/unless}}
                {{/each}}
            </ul>
        </div>

        <!-- Select Size -->

        <label>4. Size:</label>
        <div id="create-machine-size"
             data-role="collapsible"
             data-iconpos="right"
             data-collapsed-icon="arrow-d"
             data-expanded-icon="arrow-u"
             data-theme="a"
             class="mist-select">
            <h2>{{Mist.machineAddController.newMachineSize.name}}</h2>
            <ul data-role="listview" data-theme="a">
                {{#each Mist.machineAddController.newMachineProvider.sizes}}
                <li data-icon="false">
                    <a {{action "selectSize" this target="view"}}>{{this.name}}
                        <span class="size-decription">
                         - disk:{{this.disk}}, ram:{{this.ram}}
                        </span>
                    </a>
                </li>
                {{/each}}
            </ul>
        </div>

        <!-- Select Location -->

        <label>5. Location:</label>
        <div id="create-machine-location"
             data-role="collapsible"
             data-iconpos="right"
             data-collapsed-icon="arrow-d"
             data-expanded-icon="arrow-u"
             data-theme="a"
             class="mist-select">
            <h2>{{Mist.machineAddController.newMachineLocation.name}}</h2>
            <ul data-role="listview" data-theme="a">
                {{#each Mist.machineAddController.newMachineProvider.locations}}
                <li data-icon="false">
                    <a {{action "selectLocation" this target="view"}}>{{this.name}}</a>
                </li>
                {{/each}}
            </ul>
        </div>

        <!-- Select Key -->

        <label>6. Key:</label>
        <div id="create-machine-key"
             data-role="collapsible"
             data-iconpos="right"
             data-collapsed-icon="arrow-d"
             data-expanded-icon="arrow-u"
             data-theme="a"
             class="mist-select">
            <h2>{{Mist.machineAddController.newMachineKey.id}}</h2>
            <ul data-role="listview" data-theme="a">
                {{#each Mist.keysController.content}}
                    <li data-icon="false">
                        <a {{action "selectKey" this target="view"}}>{{this.id}}</a>
                    </li>
                {{/each}}
                <li data-icon="false" data-theme="d">
                    <a {{action "createKeyClicked" target="view"}}>Add Key</a>
                </li>
            </ul>
        </div>

        <!-- Select Script -->

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

        <div id="create-machine-cost">
        {{#if view.price}}
            Estimated price:
            <span>{{view.price}}</span>
        {{/if}}
        </div>

        <div class="ok-cancel" data-role="ui-grid-a" >
            <div class="ui-block-a">
                <a data-role="button"
                   data-theme="a"
                   {{action "backClicked" target="view"}}>Back</a>
            </div>
            <div class="ui-block-b">
                <button id="create-machine-ok"
                        data-theme="d"
                        {{action "launchClicked" target="view"}}>Launch!</button>
            </div>
        </div>
    </div>
</div>

{{view Mist.keyAddView}}
