<div id="single-key-page" data-role="page" class="ui-page-active" data-theme="c">

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

        <a href="#/keys" class="responsive-button" data-icon="arrow-l">Keys</a>

        <h1>{{id}}</h1>

        {{view Mist.userMenuView}}

    </div>

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

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

         <div data-role="collapsible" data-collapsed="false">
            <h3>Public Key
                {{#if Mist.keysController.gettingPublicKey}}
                <div class="ajax-loader"></div>
                {{/if}}
            </h3>
            <input id="public-key" type="text" readonly="readonly" onclick="this.focus();this.select()"/>
        </div>

        <div data-role="collapsible">
            <h3>Private key
                {{#if Mist.keysController.gettingPrivateKey}}
                <div class="ajax-loader"></div>
                {{/if}}
            </h3>
            <a data-role="button" {{action "displayClicked" target="view"}}>Display</a>
        </div>

        {{#if machines}}
        <div id="single-key-machines" data-role="collapsible">

            <h3>Machines
                {{#if Mist.backendsController.loadingMachines}}
                <div class="ajax-loader"></div>
                {{/if}}
            </h3>
            <ul data-role="listview" class="checkbox-list" data-inset="true">
                {{#each view.machines}}
                    {{view Mist.machineListItemView
                           machineBinding="this"
                           class="checkbox-link"}}
                {{/each}}
            </ul>
        </div>
        {{/if}}

        <div class="large-padding"></div>

    </div>

    {{view Mist.keyEditView}}

    {{view Mist.confirmationDialog}}


    <!--
     Since the private key is very sensitive information, it should be
     erased as soon as the popup is closed. We set the data-dismissible
     attribute to false to make sure that user will click the "Back" button
     to leave the popup (which will remove the private key from the textarea)
    -->
    <div id="private-key-popup"
         class="medium-popup"
         data-role="popup"
         data-overlay-theme="b"
         data-transition="flip"
         data-dismissible="false">
        <div data-role="header" data-theme="b">
            <h1>Private Key</h1>
        </div>
        <div data-role="content">
            <textarea id="private-key" readonly="readonly" onclick="this.focus();this.select()"></textarea>
            <a data-role="button" {{action "backClicked" target="view"}}>Back</a>
        </div>
    </div>

    <div class="dual-action-footer" data-role="footer" data-theme="b">
        <table><tbody><tr><td>
            <a data-role="button" data-icon="edit" {{action "renameClicked" target="view"}}>Rename</a>
        </td><td>
            <a data-role="button" data-icon="delete" {{action "deleteClicked" target="view"}}>Delete</a>
        </td></tr></tbody></table>
    </div>

</div>
