{# @copyright   Copyright (C) 2021 Jeffrey Bostoen #}
{# @license     http://opensource.org/licenses/AGPL-3.0 #}

{% block css %}
	<style>
		{# consistent with two-factor-authentication page in front end portal and back end #}
		{% include 'env-' ~ siTopEnvironment ~ "/jb-login-authenticator/app/css/two-factor-code.css" %}
		{# Keep mobile devices in mind #}
		#login-content {
			width: 500px;
		}
		
		.ibo-column {
			min-width: 150px;
		}
		
	</style>
{% endblock %}

{% block body %}

	<div id="login-body">
		{% block login_header %}
			<div id="login-header">
			
			</div>
		{% endblock login_header %}
		{% block login_logo %}
			<div id="login-logo">
				<a href="{{ sIconUrl }}">
					<img title="{{ sVersionShort }}" src="{{ sDisplayIcon }}" alt="logo"/>
				</a>
			</div>
		{% endblock login_logo %}
		{% block login_content_outer %}

			{% block login_content %}
				<div id="login-content">
					<div id="login-title">
						<h1>{{ 'UI:Login:TwoFactorAuthentication:Setup-Title'|dict_s }}</h1>
						
					</div>
					<div id="login-form">
						<div id="jb_two_factor_preferences">
							<form method="post">
								<div id="login-form-content">
									<div id="login-input">
									
										<p>
											{{ 'UI:Login:TwoFactorAuthentication:Setup-Why'|dict_s|raw }}
										</p>
										<hr>
										<p>
											{{ 'UI:Login:TwoFactorAuthentication:Setup-HowTo'|dict_s|raw }}
										</p>
										
									   
		  
			 
																				  
											   
			  
		  
										<div class="ibo-multi-column">
											<div class="ibo-column">
												{{ twofactor.svgqrcode|raw }}
											</div>
											<div class="ibo-column">
												<p>
													<b>{{ 'UI:Login:TwoFactorAuthentication:SetupKey'|dict_s|raw }}</b><br>
													{{ twofactor.new_formatted_secret }}
												</p>
												<p>
													{{ twofactor.issuer|raw }}<br>
													{{ twofactor.name|raw }}
												</p>
												
											</div>
										</div>
										
										<hr>
									
										<div>
											<p>
												<label for="new_pwd">{{ 'UI:Login:TwoFactorAuthentication:EnterTwoFactorCode'|dict_s|raw }}:</label>
												<input type="text" id="two_factor_code" name="two_factor_code" class="ibo-input"/>
											</p>
										</div>
									</div>
									<div id="login-submit">
										<div>
											<input type="submit" value="{{ 'UI:Login:TwoFactorAuthentication:VerifyCode'|dict_s|raw }}" />
										</div>
									</div>
								</div>
								<input type="hidden" name="loginop" value="do_setup_two_factor_secret" />
								<input type="hidden" name="auth_user" value="{{ sAuthUser|raw }}" />
								<input type="hidden" name="auth_pwd" value="{{ sAuthPwd|raw }}" />
								<input type="hidden" name="two_factor_new_secret" value="{{ twofactor.new_secret }}" />
							</form>
						</div>
					</div>
				</div>
			{% endblock login_content %}
			{% block login_additional_content %}
				<div id="login-additional-content">
				</div>
			{% endblock login_additional_content %}
		{% endblock login_content_outer %}
		{% block login_footer %}
			<div id="login-footer">
			</div>
		{% endblock login_footer %}
	</div>
{% endblock body %}



{% block script %}
	
{% endblock script %}