<div class="popups">
	<div class="modal hide b-two-factor-content g-ui-user-select-none" data-bind="modal: modalVisibility">
		<div>
			<div class="modal-header">
				<button type="button" class="close" data-bind="visible: viewEnable() || !lock(), command: cancelCommand">&times;</button>
				<h3>
					<span class="i18n" data-i18n="POPUPS_TWO_FACTOR_CFG/LEGEND_TWO_FACTOR_AUTH"></span>
				</h3>
			</div>
			<div class="modal-body">
				<div class="form-horizontal" data-bind="visible: capaTwoFactor" style="margin-top: 10px;">
					<div class="control-group" data-bind="visible: twoFactorStatus">
						<div class="controls">
							<div style="display: inline-block" data-tooltip-join="top" data-bind="tooltip: viewTwoFactorEnableTooltip">
								<div data-bind="component: {
									name: 'Checkbox',
									params: {
										label: 'POPUPS_TWO_FACTOR_CFG/LABEL_ENABLE_TWO_FACTOR',
										enable: twoFactorAllowedEnable,
										value: viewEnable,
										inline: true
									}
								}"></div>
							</div>
							&nbsp;&nbsp;&nbsp;
							<span class="i18n g-ui-link" data-bind="click: testTwoFactor, visible: twoFactorStatus"
								data-i18n="POPUPS_TWO_FACTOR_CFG/LINK_TEST"></span>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label">
							<span class="i18n" data-i18n="POPUPS_TWO_FACTOR_CFG/LABEL_TWO_FACTOR_USER"></span>
						</label>
						<div class="controls" style="padding-top: 5px;">
							<strong><span data-bind="text: viewUser"></span></strong>
							<div style="padding-top: 15px;" data-bind="visible: lock">
								<blockquote>
									<p class="muted i18n width100-on-mobile" style="width: 550px" data-i18n="POPUPS_TWO_FACTOR_CFG/TWO_FACTOR_REQUIRE_DESC"></p>
								</blockquote>
							</div>
						</div>
					</div>
					<div class="control-group" data-bind="visible: '' === viewSecret() && twoFactorStatus() && !clearing()">
						<div class="controls" style="padding-top: 5px;">
							<strong data-bind="visible: secreting">...</strong>
							<span class="g-ui-link i18n" data-bind="click: showSecret, visible: !secreting()"
								data-i18n="POPUPS_TWO_FACTOR_CFG/BUTTON_SHOW_SECRET"></span>
						</div>
					</div>
					<div class="control-group" data-bind="visible: '' !== viewSecret()">
						<label class="control-label">
							<span class="i18n" data-i18n="POPUPS_TWO_FACTOR_CFG/LABEL_TWO_FACTOR_SECRET"></span>
						</label>
						<div class="controls" style="padding-top: 5px;">
							<strong data-bind="text: viewSecret"></strong>
							&nbsp;&nbsp;
							<span class="g-ui-link i18n" data-bind="click: hideSecret" data-i18n="POPUPS_TWO_FACTOR_CFG/BUTTON_HIDE_SECRET"></span>
							<br />
							<br />
							<blockquote>
								<p class="muted i18n width100-on-mobile" style="width: 550px" data-i18n="POPUPS_TWO_FACTOR_CFG/TWO_FACTOR_SECRET_DESC"></p>
							</blockquote>
							<!-- ko if: '' !== viewUrl() -->
							<img style="margin-left: -7px;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQIW2P8DwQACgAD/il4QJ8AAAAASUVORK5CYII=" data-bind="attr: {'src': viewUrl}" />
							<!-- /ko -->
						</div>
					</div>
					<div class="control-group" data-bind="visible: '' !== viewBackupCodes()">
						<label class="control-label">
							<span class="i18n" data-i18n="POPUPS_TWO_FACTOR_CFG/LABEL_TWO_FACTOR_BACKUP_CODES"></span>
						</label>
						<div class="controls" style="padding-top: 5px;">
							<pre data-bind="text: viewBackupCodes" style="width: 230px; word-break: break-word;"></pre>
							<br />
							<blockquote>
								<p class="muted i18n width100-on-mobile" style="width: 550px" data-i18n="POPUPS_TWO_FACTOR_CFG/TWO_FACTOR_BACKUP_CODES_DESC"></p>
							</blockquote>
						</div>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<a class="btn pull-left" data-bind="visible: lock, click: logout">
					<i class="icon-power"></i>
					&nbsp;&nbsp;
					<span class="i18n" data-i18n="POPUPS_TWO_FACTOR_CFG/BUTTON_LOGOUT"></span>
				</a>
				<a class="btn btn-danger" data-bind="click: clearTwoFactor, visible: twoFactorStatus">
					<i class="icon-remove" data-bind="css: {'icon-remove': !clearing(), 'icon-spinner animated': clearing()}" ></i>
					&nbsp;&nbsp;
					<span class="i18n" data-i18n="POPUPS_TWO_FACTOR_CFG/BUTTON_CLEAR"></span>
				</a>
				<a class="btn" data-bind="click: createTwoFactor, visible: !twoFactorStatus()">
					<i class="icon-play" data-bind="css: {'icon-play': !processing(), 'icon-spinner animated': processing()}" ></i>
					&nbsp;&nbsp;
					<span class="i18n" data-i18n="POPUPS_TWO_FACTOR_CFG/BUTTON_ACTIVATE"></span>
				</a>
				<a class="btn" data-bind="command: cancelCommand, visible: viewEnable() || !lock()">
					<i class="icon-ok" ></i>
					&nbsp;&nbsp;
					<span class="i18n" data-i18n="POPUPS_TWO_FACTOR_CFG/BUTTON_DONE"></span>
				</a>
			</div>
		</div>
	</div>
</div>
