{% load i18n %}
<script src="{{ STATIC_URL }}jquery/js/jquery.js"></script>
<script src="{{ STATIC_URL }}jquery/js/qrcode.js"></script>
<script src="{{ STATIC_URL }}jquery/js/jquery.qrcode.js"></script>
<h4>{% trans "Time based one-time password" %}</h4>
<div>
	{% if key %}
	<p>{% trans "Secret" %}: {{ key }}</p>
	{% if google_authenticator %}
	<p>{% trans "Google authenticator" %}: <div class="google_authenticator">{{ google_authenticator|safe }}</div></p>
	{% endif %}
	<p><a href="{{ bookmarklet|safe }}">{% trans "Bookmarklet" %}</a>
	<p>{% trans "Copy this link to your bookmarks. When clicking on it it will generate a new one-time password which will allow you to login" %}</p></p>
	<p><form action="{{ base|safe }}/delete_totp_secret{{ next|safe }}" method="post">
		<input type="submit" class="submit-link" value="{% trans "Delete this credential" %}">
		</form></p>
	{% else %}
	<p>{% trans "This kind of authentication is actually not possible, because you do not have any secret setup." %}</p>
	{% endif %}
	<p><form action="{{ base|safe }}/new_totp_secret{{ next|safe }}" class="submit-link" method="post">
	    <input type="submit" value="{% trans "Generate a new credential" %}">
	</form></p>
</div>
<script>
	$('.google_authenticator').each(function (index, element) {
		var content = $(element).text();
		$(element).text("");
		$(element).qrcode({ "render": "table", "width": 500, "height": 500, "text": content, 'correctLevel': QRErrorCorrectLevel.M, 'typeNumber': 5 });
	});
</script>