{#
  This template receives different input based on state of tf-setup. In addition
  to form values the following are available:
  On GET:
    choices: Value of SECURITY_TWO_FACTOR_ENABLED_METHODS (with possible addition of 'delete'
    two_factor_required: Value of SECURITY_TWO_FACTOR_REQUIRED
  On successful POST:
    chosen_method: which 2FA method was chosen (e.g. sms, authenticator)
    choices: Value of SECURITY_TWO_FACTOR_ENABLED_METHODS

    If chosen_method == 'authenticator':
      authr_qrcode: the image source for the qrcode
      authr_key: same key as in qrcode - for possible manual entry
      authr_username: same username as in qrcode
      authr_issuer: same issuer as in qrcode
#}

{% extends "security/base.html" %}
{% from "security/_macros.html" import render_field_with_errors, render_field, render_field_no_label, render_field_errors %}

{% block content %}
    {% include "security/_messages.html" %}
    <h1>{{ _fsdomain("Two-factor authentication adds an extra layer of security to your account") }}</h1>
    <h3>{{ _fsdomain("In addition to your username and password, you'll need to use a code.") }}</h3>
    <form action="{{ url_for_security("two_factor_setup") }}" method="POST" name="two_factor_setup_form">
        {{ two_factor_setup_form.hidden_tag() }}
        {% for subfield in two_factor_setup_form.setup %}
            {% if subfield.data in choices %}
                {{ render_field_with_errors(subfield) }}
            {% endif %}
        {% endfor %}
        {{ render_field_errors(two_factor_setup_form.setup) }}
        {{ render_field(two_factor_setup_form.submit) }}
        {% if chosen_method=="email" and chosen_method in choices %}
            <div>{{ _fsdomain("To complete logging in, please enter the code sent to your mail") }}</div>
        {% endif %}
        {% if chosen_method=="authenticator" and chosen_method in choices %}
          <hr>
          <div class="fs-center">
            <div>
              {{ _fsdomain("Open an authenticator app on your device and scan the following QRcode (or enter the code below manually) to start receiving codes:") }}
            </div>
            <div>
               <img alt="{{ _fsdomain("Two factor authentication code") }}" id="qrcode" src="{{ authr_qrcode }}">
            </div>
            <div>
              {{ authr_key }}
            </div>
          </div>
        {% endif %}
        {% if chosen_method=="sms" and chosen_method in choices %}
            <p>{{ _fsdomain("To Which Phone Number Should We Send Code To?") }}</p>
            {{ two_factor_setup_form.hidden_tag() }}
            {{ render_field_with_errors(two_factor_setup_form.phone) }}
            {{ render_field(two_factor_setup_form.submit) }}
        {% endif %}
    </form>
    {% if security.webauthn and not chosen_method %}
      <h3>{{ _fsdomain("WebAuthn") }}</h3>
      <div class="fs-div">
        {{ _fsdomain("This application supports WebAuthn security keys.") }}
        <a href="{{ url_for_security('wan_register') }}">{{ _fsdomain("You can set them up here.") }}</a>
      </div>
    {% endif %}
    {% if chosen_method %}
      {# Hide this when first setting up #}
      <hr>
      <form action="{{ url_for_security("two_factor_token_validation") }}" method="POST"
            name="two_factor_verify_code_form">
          {{ two_factor_verify_code_form.hidden_tag() }}
          {{ render_field_with_errors(two_factor_verify_code_form.code) }}
          {{ render_field(two_factor_verify_code_form.submit) }}
      </form>
    {% endif %}
    {% if security.support_mfa and security.multi_factor_recovery_codes %}
      <h3>{{ _fsdomain("Recovery Codes") }}</h3>
      <div class="fs-div">
        {{ _fsdomain("This application supports setting up recovery codes.") }}
        <a href="{{ url_for_security('mf_recovery_codes') }}">{{ _fsdomain("You can set them up here.") }}</a>
      </div>
    {% endif %}
    {% include "security/_menu.html" %}
{% endblock %}
