{% extends "templates/web.html" %}

{% block title %}{{ _("QR Code") }}{% endblock %}

{% block page_content %}
<h1>{{ _("QR Code for Login Verification") }}</h1>
<div class='row'>
	<div class='col-sm-6'>
		<p>{{ _("Hi {0}").format(qr_code_user.first_name | e) }},</p>

		<p>{{ _("Steps to verify your login") }}:</p>
			<ol>
			<li> {{ _("Open your authentication app on your mobile phone.") }}
			<li> {{ _("Scan the QR Code and enter the resulting code displayed.") }}
			<li> {{ _("Return to the Verification screen and enter the code displayed by your authentication app") }}
			</ol>
		</p>
		<br>
		<p class='text-muted small'>{{ _("Authentication Apps you can use are: ") }}
			FreeOTP, Google Authenticator, Lastpass Authenticator, Authy and Duo Mobile.
		</p>
	</div>
	<div class='col-sm-6' style='padding-top: 15px;'>
		<img src="data:image/svg+xml;base64,{{qrcode_svg}}">
	</div>
</div>
{% endblock %}

{% block style %}
<style>
	body {
		background-color: var(--bg-color);
	}

	nav.navbar,
	.navbar-brand,
	.navbar-toggler,
	.navbar-nav,
	#website-post-login,
	.logged-in,
	.btn-login-area,
	.nav-avatar,
	footer.web-footer,
	.web-footer,
	.footer-logo-extension,
	.footer-powered {
		display: none !important;
	}
</style>
{% endblock %}
