<div id="add-backend-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>Add backend</h1>
        <a class="ui-btn-right" data-icon="info" data-iconpos="notext" data-theme="b"
            target="_blank" href="https://mistio.zendesk.com/hc/en-us"></a>
    </div>

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

        <label>1. Provider:</label>
        <div id="new-backend-provider"
             class="mist-select"
             data-role="collapsible"
             data-collapsed-icon="carat-d"
             data-expanded-icon="carat-u"
             data-iconpos="right"
             data-theme="a">
            <h2>{{Mist.backendAddController.newBackendProvider.title}}</h2>
            <ul class="select-listmenu" data-role="listview" data-theme="a">
                {{#each Mist.backendsController.providerList}}
                <li data-icon="false">
                    <a {{action "selectProvider" this target="view"}}>{{this.title}}</a>
                </li>
                {{/each}}
            </ul>
        </div>
        <div data-theme="a">
            <label for="new-backend-first-field">2. {{view.firstFieldLabel}}:</label>
            {{view Mist.TextField
                   id="new-backend-first-field"
                   data-theme="a"
                   valueBinding="Mist.backendAddController.newBackendFirstField"}}

            {{#if view.secondFieldLabel}}
                <label for="new-backend-second-field">3. {{view.secondFieldLabel}}:</label>
                {{view Mist.TextField
                       type="password"
                       id="new-backend-second-field"
                       data-theme="a"
                       valueBinding="Mist.backendAddController.newBackendSecondField"}}
            {{/if}}

        </div>

        <div id="openstack-bundle" data-theme="a">
            <label for="new-backend-openstack-url">4. Auth URL:</label>
            {{view Mist.TextField
                   id="new-backend-openstack-url"
                   data-theme="a"
                   valueBinding="Mist.backendAddController.newBackendOpenStackURL"}}

            <label for="new-backend-openstack-tenant">5. Tenant Name:</label>
            {{view Mist.TextField
                   id="new-backend-openstack-tenant"
                   data-theme="a"
                   valueBinding="Mist.backendAddController.newBackendOpenStackTenant"}}

            <div id="opentack-advanced-wrapper">
                <select id="openstack-advanced" data-role="slider" data-theme="a"
                {{action "advancedToggled" target="view" on="change"}}>
                   <option value="0">Basic settings</option>
                    <option value="1">Advanced settings</option>
                </select>
            </div>

            <div id="non-hp-cloud">

                <label for="new-backend-openstack-region">6. Region:</label>
                {{view Mist.TextField
                       id="new-backend-openstack-region"
                       data-theme="a"
                       valueBinding="Mist.backendAddController.newBackendOpenStackRegion"}}

                <label for="new-backend-openstack-endpoint">7. Compute Endpoint:</label>
                {{view Mist.TextField
                       id="new-backend-openstack-endpoint"
                       data-theme="a"
                       valueBinding="Mist.backendAddController.newBackendOpenStackComputeEndpoint"}}
            </div>
        </div>

        <div id="gce-bundle">

            <label for ="new-backend-key">3. Private key:</label>

            <!-- Value is sent to newBackendSecondField -->
            <a class="ui-btn ui-btn-a ui-corner-all"
              {{action "privateKeyClicked" target="view"}}>
                Add key
            </a>

            <label for="new-backend-port">4. Project ID:</label>
            {{view Mist.TextField
                   id="new-backend-project-name"
                   data-theme="a"
                   valueBinding="Mist.backendAddController.newBackendProjectName"}}
        </div>

        <div id="baremetal-bundle">
            <label for="new-backend-port">4. Port:</label>
            {{view Mist.TextField
                   id="new-backend-port"
                   data-theme="a"
                   valueBinding="Mist.backendAddController.newBackendPort"}}

            <label>5. SSH Key:</label>
            <div id="new-backend-key"
                 class="mist-select"
                 data-role="collapsible"
                 data-iconpos="right"
                 data-collapsed-icon="carat-d"
                 data-expanded-icon="carat-u"
                 data-theme="a">
                <h2>{{Mist.backendAddController.newBackendKey.id}}</h2>
                <ul data-role="listview">
                    {{#each Mist.keysController.content}}
                        <li data-icon="false" data-theme="a">
                            <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>
        </div>

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

        <div class="ok-cancel" data-role="controlgroup" data-type="horizontal">
            <a data-role="button" {{action "backClicked" target="view"}} data-theme="a">Back</a>
            <button id="new-backend-ok" data-theme="d" {{action "addClicked" target="view"}}>Add</a>
        </div>
    </div>
</div>

{{view Mist.keyAddView}}

{{view Mist.fileUploadView}}
