{% load i18n %}
<style>
    .form-horizontal .form-group {
        margin-right: 0;
        margin-left: 0;
        line-height: 20.8px;
    }

    #modal_settings_info .modal-header .close {
        margin-top: -15px;
        opacity: 0.8;
        color: #134473;
    }

    .form-center {
        min-width: 500px;
    {#width: 40%;#} margin: auto;
        text-align: center;
        border: 1px solid;
        border-radius: 5px;
        background-color: #ffffff;
    }

    .qr {
        max-width: 60%;
        max-height: 60%;
    }

    .qrtable {
        width: 90%;
        text-align: center;
        margin: auto;
    }

    .twoFAForm {
        min-width: 300px;
    {#width: 40%;#}
    }

    .sideColumn {
        width: 35%;
        font-size: 13pt;
        text-align: justify;
    }

    .instruction {
        text-align: left;
        margin: 10px;
    }


</style>

<table class="qrtable">
  <tr>
    <th class="sideColumn"></th>
    <th class="twoFAForm" style="vertical-align: top">
      <form id="form2FA" class="form-center" action="/" id="2FA" autocomplete="off"
            style="min-width: 300px; width: 100%; padding: 5px 0;">
        {% csrf_token %}
        <div style="display: flex; justify-content: center; flex-direction: row; align-items: center;">
          <span style="margin-left: auto; margin-right: 30px;">{% trans 'Enable 2FA' %}</span>
          <label class="switch">
            <input type="checkbox" style='margin-top:15px;' onclick="toggle_2fa(this)"
                   {% if user.is_2fa_active %}checked{% endif %} name="active_2fa" id="active_2fa">
            <span class="slider round"></span>
          </label>
          <span class="fa fa-question" onclick="showHideInstruction()"
                style="margin-left: auto; margin-top: -10px;margin-right: 10px; text-color: #1A5287; font-size: 15pt"></span>
        </div>
        <div>


        </div>
        <div class="qr_block" style="{% if not user.is_2fa_active %}display: none;{% endif %}">
          <p><img class='qr' id='qrcode' src="" alt=""
          ></p>
          <p>2FA key: </p>
          <p class='margin-bottom-15' id="key2FA" style="font-size: 11px">{{ user.secret }}</p>
        </div>


        <h4 id='success2FA' class="text-success"
            style="display: none;">{% trans 'two-factor authentication installed' %}</h4>
        <p id='relogin2FA' style="display: none;">{% trans '2fa relogin required' %}</p>
        <div id='check_2FA_form' style="display: none;">


          <h4 id='error2FA' class="text-danger" style="display: none;">{% trans 'wrong code' %}</h4>
          <label for="">{% trans '2FA code' %}:</label>
          <input id="code_input" class="form-group" style="max-width: 35%; height: 35px" type="text" value="">
          <button id="codeInputBtn" class="btn-primary" type="button" onclick="check_and_turn_on_2fa()"
                  style="margin-top: 5px; color:white; border-radius: 7px; padding: 7px;">{% trans 'Enable 2FA' %}
          </button>
          {#          </form>#}
        </div>
      </form>
    </th>
    <th class="sideColumn">
      <div class="hidden" id="incruction2FA">
        <p class="instruction" style="white-space: pre-wrap; ">{% trans 'turn on 2FA instruction' %}</p>
      </div>
    </th>
  </tr>
</table>


<script type="text/javascript">

    {#todo перенести в отдельный js file#}
    secret_2FA_key = null


    {# prevents redundant sending on enter #}
    $(document).ready(function () {
        $('#form2FA').keydown(function (event) {
            if (event.keyCode == 13) {
                event.preventDefault();
                return false;
            }
        });
    });

    {# processing enter #}
    code_input.addEventListener("keydown", function (e) {
        if (e.keyCode == 13) {  //checks whether the pressed key is "Enter"
            e.preventDefault();
            codeInputBtn.click();
        }
    });

    let showHideInstruction = function () {
        modal_settings_info_body.innerHTML = incruction2FA.innerHTML
        $('#modal_settings_info').modal('show');
    }
</script>