<div id="machine-keys-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>Manage Keys</h1>
    </div>

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

        <a id="associate-btn"
           data-role="button"
           data-theme="d"
           {{action "associateClicked" target="view"}}>Associate</a>

        {{#if Mist.machineKeysController.associatedKeys}}
        <ul id="machine-keys" data-role="listview">
            {{#each Mist.machineKeysController.associatedKeys}}
                {{view Mist.machineKeysListItemView keyBinding="this"}}
            {{/each}}
        </ul>
        {{/if}}

        {{#if Mist.keysController.associatingKey}}
            <div class="ajax-loader"></div>
        {{else}} {{#if Mist.keysController.disassociatingKey}}
            <div class="ajax-loader"></div>
        {{/if}} {{/if}}

        <a data-role="button" data-theme="a" {{action "backClicked" target="view"}}>Back</a>

    </div>

</div>

{{view Mist.keyAddView}}

<div id="key-actions-popup" class="tiny-popup" data-role="popup" data-overlay-theme="b" data-transition="flip"
                                                                                        data-position-to="#machine-keys"
                                                                                        data-theme="b">
    <div data-role="header">
        <h1>Actions</h1>
    </div>

    <div data-role="content">
        <button data-theme="a" {{action "removeClicked" target="view"}}>Remove</button>
        <button data-theme="a" {{action "probeClicked" target="view"}}>Probe</button>
        <button data-theme="a" {{action "cancelClicked" target="view"}}>Cancel</button>
    </div>
</div>

<div id="non-associated-keys-popup" class="tiny-popup" data-role="popup" data-overlay-theme="b" data-transition="flip"
                                                                                        data-position-to="#associate-btn">
    <ul data-role="listview">
        {{#each Mist.machineKeysController.nonAssociatedKeys}}
        <li data-icon="false">
            <a {{action "nonAssociatedKeyClicked" this target="view"}}>{{this.id}}</a>
        </li>
        {{/each}}
        <li data-icon="false" data-theme="d">
            <a {{action "newKeyClicked" target="view"}}>New key</a>
        </li>
    </ul>
</div>
<!-- data-position-to="#machine-keys-panel" -->
<div id="machine-userPort-popup" class="large-popup" data-role="popup" data-overlay-theme="b" data-position-to="#machine-keys-panel"  data-transition="pop">

    <div data-role="header" data-theme="b">
        <h2 class='title'>SSH user & port</h2>
    </div>

    <div data-role="content">
        <div class="message">
            Cannot connect as root on port 22
        </div>
        <label for="user">User:</label>
        {{view Mist.TextField
               id="user"
               placeholder="root"
               valueBinding="Mist.machineKeysController.user"}}

        <label for="port">Port:</label>
        {{view Mist.TextField
               id="port"
               placeholder="22"
               valueBinding="Mist.machineKeysController.port"}}

        <div class="ok-cancel" data-role="controlgroup" data-type="horizontal">
            <a data-role="button" {{action "closeSSH_Details" target="Mist.machineKeysController"}}>Cancel</a>
            <a id="tryAssociate" data-role="button" data-theme="d" {{action "customAssociateClicked" target="view"}}>Retry</a>
        </div>

    </div>

</div>
