<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>
