{% extends "admin/base_site.html" %}
{% load i18n static %}

{% block extrastyle %}
  {{ block.super }}
  <link rel="stylesheet" type="text/css" href="{% static "css/login.css" %}">
  {{ form.media }}
{% endblock %}


{% block bodyclass %}{{ block.super }} login{% endblock %}

{% block usertools %}{% endblock %}

{% block nav-global %}{% endblock %}

{% block nav-sidebar %}{% endblock %}

{% block content_title %}{% endblock %}

{% block breadcrumbs %}{% endblock %}

{% block content %}
  <div id="content-main">

    {% if wizard.steps.current == 'token' %}
      {% if device.method == 'call' %}
        <p>{% blocktrans trimmed %}We are calling your phone right now, please enter the
          digits you hear.{% endblocktrans %}</p>
      {% elif device.method == 'sms' %}
        <p>{% blocktrans trimmed %}We sent you a text message, please enter the tokens we
          sent.{% endblocktrans %}</p>
      {% else %}
        <p>{% blocktrans trimmed %}Please enter the tokens generated by your token
          generator.{% endblocktrans %}</p>
      {% endif %}
    {% elif wizard.steps.current == 'backup' %}
      <p>{% blocktrans trimmed %}Use this form for entering backup tokens for logging in.
        These tokens have been generated for you to print and keep safe. Please
        enter one of these backup tokens to login to your account.{% endblocktrans %}</p>
    {% endif %}

    {% if form.errors and not form.non_field_errors %}
      <p class="errornote">
        {% if form.errors.items|length == 1 %}
          {% translate "Please correct the error below." %}
        {% else %}
          {% translate "Please correct the errors below." %}
        {% endif %}
      </p>
    {% endif %}
    {% if form.non_field_errors %}
      {% for error in form.non_field_errors %}
        <p class="errornote">{{ error }}</p>
      {% endfor %}
    {% endif %}

    <form action="" method="post" id="login-form">{% csrf_token %}
      {{ wizard.management_form }}

      {% if wizard.steps.current == 'auth' %}
        <div class="form-row">
          {{ form.username.errors }}
          {{ form.username.label_tag }} {{ form.username }}
        </div>
        <div class="form-row">
          {{ form.password.errors }}
          {{ form.password.label_tag }} {{ form.password }}
        </div>
        <div class="submit-row">
          <input type="submit" value="{% translate 'Log in' %}">
        </div>
      {% else %}
        <div class="form-row">
          {{ form.otp_token.errors }}
          {{ form.otp_token.label_tag }} {{ form.otp_token }}
        </div>

        <div class="submit-row">
          <input type="submit" value="{% translate 'Continue' %}">
        </div>
      {% endif %}

      {% if other_devices %}
        <p>{% trans "Or, alternatively, use one of your backup phones:" %}</p>
        <p>
          {% for other in other_devices %}
          <button name="challenge_device" value="{{ other.persistent_id }}"
                  class="btn btn-secondary btn-block" type="submit">
            {{ other.generate_challenge_button_title }}
          </button>
        {% endfor %}</p>
      {% endif %}
      {% if backup_tokens %}
        <p>{% trans "As a last resort, you can use a backup token:" %}</p>
        <p>
          <button name="wizard_goto_step" type="submit" value="backup"
                  class="btn btn-secondary btn-block">{% trans "Use Backup Token" %}</button>
        </p>
      {% endif %}

      <input type="hidden" name="next" value="{{ request.GET.next }}"/>
      {# hidden submit button to enable [enter] key #}
      <input type="submit" value="" style="display: none;" />
    </form>
  </div>
{% endblock %}