<a id="add-backend-button"
    href="#"
    class="add-button"
    data-theme="b"
    data-role="button"
    data-icon="plus"
    data-iconpos="right"
    {{action addBackend target="view"}}>Add backend</a>

<div data-role="panel" id="add-backend" data-position="right" data-display="overlay" data-theme="b">
    <div data-role="header">
        <h1>Add backend</h1>
    </div>
    <div data-role="content">
        <label for="select-backend">1. Provider:</label>
        <div class="select-backend-collapsible" data-role="collapsible" data-iconpos="right" data-corners="true"
            data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u">
            <h2>Select backend</h2>
            <ul class="select-listmenu" data-role="listview" data-divider-theme="d" data-corners="true">
                {{#each view.providerList}}
                <li data-icon="false" data-corners="true">
                    <a href="#" title="{{unbound this.provider}}">{{this.title}}</a>
                </li>
                {{/each}}
            </ul>
        </div>

        <label for="apikey" id="textApiKey">2. API Key:</label>
        {{view Mist.TextField
            valueBinding="Mist.backendAddController.newBackendKey"
            name="create-backend-key"
            id="create-backend-key"}}

        <label for="apisecret" id="textApiSecret">3. API Secret:</label>
        {{view Mist.TextField
            type="password"
            valueBinding="Mist.backendAddController.newBackendSecret"
            name="create-backend-secret"
            id="create-backend-secret"}}

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