{% extends 'registration/base_registration.html' %}
{% load i18n %}

  {% block card_header %}
    <h2>Choose Method</h2>
  {% endblock %}
  {% block card_body %}
    <div class="list-group">
      <a href="{%  url 'mfa_enroll_totp' %}" class="list-group-item list-group-item-action">
        <div class="row">
          <div class="col-1 d-flex-column align-self-center">
            <!-- Image courtesy of getbootstrap.com -->
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-phone" viewBox="0 0 16 16">
              <path d="M11 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h6zM5 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H5z"/>
              <path d="M8 14a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
            </svg>
          </div>
          <div class="col ml-2 ms-2">
            <h5 class="card-title">Enroll with authenticator app</h5>
            <p>You will use an authenticator app as your second factor of authentication.</p>
          </div>
        </div>
      </a>
      <a href="{%  url 'mfa_enroll_sms' %}" class="list-group-item list-group-item-action">
        <div class="row">
          <div class="col-1 d-flex-column align-self-center">
            <!-- Image courtesy of getbootstrap.com -->
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-chat-left-dots" viewBox="0 0 16 16">
              <path d="M14 1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H4.414A2 2 0 0 0 3 11.586l-2 2V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12.793a.5.5 0 0 0 .854.353l2.853-2.853A1 1 0 0 1 4.414 12H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
              <path d="M5 6a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
            </svg>
          </div>
          <div class="col ml-2 ms-2">
            <h5 class="card-title">Enroll with text message</h5>
            <p>You will receive a text message with a code as your second factor of authentication.</p>
          </div>
        </div>
      </a>
    </div>
  {% endblock %}


