{#
  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 "themes/" + sysSettings.systemTheme + "/layout.html" %}
{% from "security/_macros.html" import render_field_with_errors, render_field, render_field_no_label, render_field_errors %}

{% block head %}
<title>{{sysSettings.siteName}} - Configure Two-Factor Authentication</title>
{% endblock %}

{% block styles %}
    {{ super() }}
    <style type="text/css">
        .center { text-align: center }
        .important { font-size: larger; font-weight: bold }
    </style>
{% endblock %}

{% block body %}
     <div class="container">
        <div class="row">
            <div class="col-sm-9 col-md-7 col-lg-7 mx-auto">
                <div class="card my-5 shadow text-left">
                    <h5 class="card-header text-white bg-dark mb-3">
                        Two-Factor Authentication Configuration
                    </h5>
                    <div class="card-body text-left">
                        <div>
                            <div class="mb-2">{{ _fsdomain("Two-factor authentication adds an extra layer of security to your account.") }}</div>
                            <div class="mb-2">{{ _fsdomain("In addition to your email address and password, you'll need to use a code generated by your authenticator.") }}</div><br>
                            <div class="my-2">
                                <form action="{{ url_for_security("two_factor_setup") }}" method="POST" name="two_factor_setup_form" id="2faSelectorForm">
                                    {{ two_factor_setup_form.hidden_tag() }}
                                    <ul class="list-group">
                                        {% for subfield in two_factor_setup_form.setup %}
                                            {% if subfield.data in choices %}
                                                <li class="list-group-item">{{ render_field_with_errors(subfield) }}</li>
                                            {% endif %}
                                        {% endfor %}
                                    </ul>
                                    {{ render_field_errors(two_factor_setup_form.setup) }}
                                    {{ render_field(two_factor_setup_form.submit, id="2faSelect") }}
                                </form>
                                {% if chosen_method=="authenticator" and chosen_method in choices %}
                                  <hr>
                                  <div class="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>

                                <hr>
                                <form id="2favalidation" 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, class="form-control") }}
                                    {{ render_field(two_factor_verify_code_form.submit) }}
                                </form>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
     </div>

{% endblock %}