<xf:title>{{ phrase('two_step_verification_setup:') }} {$provider.title}</xf:title>

<xf:wrap template="account_wrapper" />

<xf:form action="{{ link('account/two-step/manage', $provider) }}" class="block">
	<div class="block-container">
		<div class="block-body">
			<xf:formrow
				label="{{ phrase('tfa.backup') }}"
				explain="{{ phrase('backup_codes_used_once_secure_location') }}">

				<ul class="listColumns listColumns--spaced listPlain">
				<xf:foreach loop="$usedCodes" value="$code">
					<li><div style="text-decoration: line-through">{$code}</div></li>
				</xf:foreach>
				<xf:foreach loop="$availableCodes" value="$code">
					<li><div>{$code}</div></li>
				</xf:foreach>
				</ul>
			</xf:formrow>

			<xf:checkboxrow>
				<xf:option name="regen" value="1"
					label="{{ phrase('generate_new_backup_codes') }}"
					hint="{{ phrase('this_will_generate_new_backup_codes') }}" />
			</xf:checkboxrow>
		</div>
		<xf:submitrow submit="{{ phrase('confirm_regeneration') }}" />
	</div>
</xf:form>