{{template "base/head" .}}
<div class="user settings twofa">
	{{template "user/settings/navbar" .}}
	<div class="ui container">
		{{template "base/alert" .}}
		<h4 class="ui top attached header">
			{{.i18n.Tr "settings.twofa_enroll"}}
		</h4>
		<div class="ui attached segment">
			<p>{{.i18n.Tr "settings.scan_this_image"}}</p>
			<img src="{{.QrUri}}" alt="{{.TwofaSecret}}">
			<p>{{.i18n.Tr "settings.or_enter_secret" .TwofaSecret}}
			<p>{{.i18n.Tr "settings.then_enter_passcode"}}
			<form class="ui form" action="{{.Link}}" method="post">
				{{.CsrfTokenHtml}}
				<div class="inline required field {{if .Err_Passcode}}error{{end}}">
					<label for="passcode">{{.i18n.Tr "passcode"}}</label>
					<input id="passcode" name="passcode" autofocus required>
				</div>
				<div class="inline field">
					<label></label>
					<button class="ui green button">{{.i18n.Tr "auth.verify"}}</button>
				</div>
			</form>
		</div>
	</div>
</div>

{{template "base/footer" .}}