<div class="popup" style="display: none;">
<div class="mask" data-bind="click: cancelPopup"></div>
<div class="popup_panel">
<span class="close" data-bind="click: cancelPopup"></span>
<span class="popup_heading" data-bind="i18n: {'key': '%MODULENAME%/HEADING_GENERATE_NEW_KEY'}"></span>
<div class="fields">
<div class="row" data-bind="visible: emails().length > 0">
<span class="label" data-bind="i18n: {'key': 'COREWEBCLIENT/LABEL_EMAIL'}"></span>
<select class="input" data-bind="options: emails, value: selectedEmail"></select>
</div>
<div class="row" data-bind="visible: emails().length > 0">
<span class="label" data-bind="i18n: {'key': 'COREWEBCLIENT/LABEL_PASSWORD'}"></span>
<input autocomplete="new-password" type="password" class="value input" data-bind="value: password" />
</div>
<div class="row" data-bind="visible: emails().length > 0">
<span class="label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_KEY_LENGTH'}"></span>
<select class="value input" data-bind="value: selectedKeyLength, options: keyLengthOptions"></select>
</div>
<div class="row" data-bind="visible: emails().length === 0">
<span class="value" data-bind="text: keysExistText"></span>
</div>
<div class="buttons">
<span class="button" data-bind="visible: !process(), i18n: {'key': '%MODULENAME%/ACTION_GENERATE'}, click: generate, css: {'disabled': emails().length === 0}"></span>
<span class="button" data-bind="visible: process, i18n: {'key': '%MODULENAME%/ACTION_GENERATE_IN_PROGRESS'}"></span>
<span class="button secondary_button" data-bind="visible: !process(), i18n: {'key': 'COREWEBCLIENT/ACTION_CANCEL'}, click: cancelPopup"></span>
</div>
</div>
</div>
<span class="helper"></span>
</div>