{% extends "base.html" %}

{% block content %}

<div class="container">
  <div class="row justify-content-center">
    <div class="col-lg-12">
      <div class="jumbotron text-center p-4">
        <h2>artFi Security Check!</h2>
        <h4>Setup or Authenticate 2-Factor Authentication</h4>
      </div>
    </div>
    <div class="col-lg-5">
      <form method="POST">
        {{ form2.hidden_tag() }}
        <div>
          <h5>Instructions:</h5>
          <ul>
            <li>Download <a href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&hl=en&gl=US" target="_blank">Google Authenticator</a> on your mobile.</li>
            <li>Create a new account with <strong>setup key</strong> method.</li>
            <li>Provide the required details (name, secret key).</li>
            <li>Select time-based authentication.</li>
            <li>Submit the generated key in the form.</li>
            <li>The Secret token has been sent to your registered email!</li>
            <li>If you want to reset, press reset and check your email</li>
          </ul>
        </div>
        <div class="form-group">
            {{ form2.send_key() }}
            {{ form2.reset_key() }}
          <!--<label for="secret">Secret Token</label>
          <input type="text" class="form-control" id="secret" value="{{ secret }}" readonly>-->
        </div>
      </form>
    </div>
    <br>
    <div class="col-lg-5 col-md-7 mx-auto my-auto">
      <div class="card">
        <div class="card-body px-lg-5 py-lg-5 text-center">
          <label for="otp"><h2 class="mfa-word">Generated OTP</h2></label>
            <form method="POST">
              {{ form.hidden_tag() }}
              <div class="row mb-4">
                {{ form.otp(class="col-lg-6 col-md-6 col-6 ps-0 ps-md-6 mfa-input-box", placeholder="Enter the 6-digit code") }}
              </div>
              <div class="text-center">
                {{ form.submit(class="btn mfa-btn") }}
              </div>
            </form>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}