{% extends "multifactor/base.html" %}
{% load static i18n %}

{% block card_title %}{% trans "Add a New Factor" %}{% endblock %}
{% block container_class %}{% endblock %}

{% block content %}

<p>{% trans "To protect your account and this system from intrusion we request a second verification factor." %}</p>

<p>{% trans "There are a range of options. TOTP authenticators are a good first factor because most people always have their phone with them. USB and on-device options might be more secure but have more limited portability." %}</p>

<div class="columns">
	{% if 'FIDO2' in available_factors %}
	<div class="column">
		<div class="card">
			<div class="card-header">
				<h5 class="card-header-title is-centered">{% trans "FIDO2 Device" %}</h5>
			</div>
			<div class="card-content">
				<p>{% blocktrans %}A broad range of devices: <a href="https://support.microsoft.com/en-gb/help/4028017/windows-learn-about-windows-hello-and-set-it-up">Windows Hello</a> (fingerprint, facial recognition), Google Chrome, Google Android (via biometrics or location), or FIDO2 USB and NFC keys.{% endblocktrans %}
				<p>{% trans "On-device options are convenient but will lock you to that device. USB keys are more portable." %}</p>
			</div>
			<div class="card-footer">
				<a href="{% url 'multifactor:fido2_start' %}" class="button is-100 is-primary">{% trans "Add FIDO2 Device" %}</a>
			</div>
		</div>
	</div>
	{% endif %}
	{% if 'TOTP' in available_factors %}
	<div class="column">
		<div class="card">
			<div class="card-header">
				<h5 class="card-header-title is-centered">{% trans "TOTP Authenticator" %}</h5>
			</div>
			<div class="card-content">
				<p>{% trans "Install an authenticator from your phone's marketplace and get access to a secure rotating passcode. Once linked, verification is just a matter of copying that code back into here when prompted." %}</p>
				<p>{% trans "Benefits: free, portable." %}</p>
			</div>
			<div class="card-footer">
				<a href="{% url 'multifactor:totp_start' %}" class="button is-100 is-primary">{% trans "Add TOTP Authenticator" %}</a>
			</div>
		</div>
	</div>
	{% endif %}
</div>

{% endblock %}