<div class="popup" style="display: none;">
	<div class="mask" data-bind="click: cancelPopup"></div>
	<div class="popup_panel popup_show_backup_codes">
		<span class="close" data-bind="click: cancelPopup"></span>
		<div class="fields">
			<h1 data-bind="i18n: {'key': '%MODULENAME%/HEADING_SAVE_CODES'}"></h1>
			<div class="hint" data-bind="i18n: {'key': '%MODULENAME%/INFO_KEEP_CODES_SAFE'}"></div>
			<div class="fieldset list-block">
				<div class="item-content">
					<div data-bind="foreach: backupCodes" class="backup-codes-container">
						<!-- ko if: $data -->
							<div data-bind="text: $data"></div>
						<!-- /ko -->
						<!-- ko if: !$data -->
							<div class="hint" data-bind="i18n: {'key': '%MODULENAME%/LABEL_ALREADY_USED'}"></div>
						<!-- /ko -->
					</div>
				</div>
			</div>
			<div class="hint" data-bind="i18n: {'key': '%MODULENAME%/INFO_USE_CODE_ONCE'}"></div>
			<div class="hint" data-bind="text: codesGeneratedDataInfo"></div>
			<div class="buttons big_single_button">
				<span class="button contour_button" data-bind="i18n: {'key': '%MODULENAME%/ACTION_GET_NEW_CODES'}, command: generateBackupCodesCommand"></span>
			</div>
			<div class="buttons">
				<span class="button" data-bind="i18n: {'key': '%MODULENAME%/ACTION_PRINT'}, click: print"></span>
				<span class="button" data-bind="i18n: {'key': '%MODULENAME%/ACTION_DOWNLOAD'}, click: download"></span>
				<span class="button secondary_button" data-bind="i18n: {'key': 'COREWEBCLIENT/ACTION_CLOSE'}, click: cancelPopup"></span>
			</div>
		</div>
	</div>
	<span class="helper"></span>
</div>
