<div class="b-settings-two-factor form-horizontal">
	<div class="legend" data-i18n="PLUGIN_2FA/LEGEND_TWO_FACTOR_AUTH"></div>
	<div class="form-horizontal">
		<div class="control-group" data-bind="visible: twoFactorStatus">
			<div class="controls">
				<div style="display: inline-block" data-bind="attr:{title: viewTwoFactorEnableTooltip}">
					<div data-bind="component: {
						name: 'Checkbox',
						params: {
							label: 'PLUGIN_2FA/LABEL_ENABLE_TWO_FACTOR',
							enable: twoFactorAllowedEnable,
							value: viewEnable,
							inline: true
						}
					}"></div>
				</div>
				&nbsp;&nbsp;&nbsp;
				<span class="g-ui-link" data-bind="click: testTwoFactor, visible: twoFactorStatus"
					data-i18n="PLUGIN_2FA/LINK_TEST"></span>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">
				<span data-i18n="PLUGIN_2FA/LABEL_TWO_FACTOR_USER"></span>
			</label>
			<div class="controls" style="padding-top: 5px;">
				<strong data-bind="text: viewUser"></strong>
			</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" data-bind="click: showSecret, visible: !secreting()"
					data-i18n="PLUGIN_2FA/BUTTON_SHOW_SECRET"></span>
			</div>
		</div>
		<div class="control-group" data-bind="visible: '' !== viewSecret()">
			<label class="control-label">
				<span data-i18n="PLUGIN_2FA/LABEL_TWO_FACTOR_SECRET"></span>
			</label>
			<div class="controls" style="padding-top: 5px;">
				<strong data-bind="text: viewSecret" style="user-select:text"></strong>
				&nbsp;&nbsp;
				<span class="g-ui-link" data-bind="click: hideSecret" data-i18n="PLUGIN_2FA/BUTTON_HIDE_SECRET"></span>
				<br />
				<br />
				<blockquote>
					<p class="muted width100-on-mobile" style="width: 550px" data-i18n="PLUGIN_2FA/TWO_FACTOR_SECRET_DESC"></p>
				</blockquote>
				<pre data-bind="text: viewQRCode" style="line-height:1;letter-spacing:-1px;font-family:monospace"></pre>
			</div>
		</div>
		<div class="control-group" data-bind="visible: '' !== viewBackupCodes()">
			<label class="control-label">
				<span data-i18n="PLUGIN_2FA/LABEL_TWO_FACTOR_BACKUP_CODES"></span>
			</label>
			<div class="controls" style="padding-top: 5px;">
				<pre data-bind="text: viewBackupCodes" style="user-select: text; width: 230px; word-break: break-word;"></pre>
				<br />
				<blockquote>
					<p class="muted width100-on-mobile" style="width: 550px" data-i18n="PLUGIN_2FA/TWO_FACTOR_BACKUP_CODES_DESC"></p>
				</blockquote>
			</div>
		</div>
	</div>

	<a class="btn btn-danger" data-bind="click: clearTwoFactor, visible: twoFactorStatus">
		<i class="fontastic" data-bind="css: {'icon-spinner': clearing()}">✖</i>
		<span data-i18n="GLOBAL/CLEAR"></span>
	</a>
	<a class="btn" data-bind="click: createTwoFactor, visible: !twoFactorStatus()">
		<i class="fontastic" data-bind="css: {'icon-spinner': processing()}">▶</i>
		<span data-i18n="PLUGIN_2FA/BUTTON_ACTIVATE"></span>
	</a>
<!--
	<a class="btn" data-bind="click: close, visible: viewEnable()">
		<i class="icon-ok" ></i>
		<span data-i18n="GLOBAL/DONE"></span>
	</a>
-->
</div>
