{# -*- engine:django -*- #}
{% extends "two_factor/_base_focus.html" %}
{% load i18n two_factor account socialaccount %}

{% block browser_title %}
  {% trans "Login" %}
{% endblock %}

{% block content %}
  {% get_providers as socialaccount_providers %}

  <div class="row">
    <div class="col m1 l2 xl3"></div>
    <div class="col s12 m10 l8 xl6">
      <div class="card">
        <div class="card-content">
          {% if wizard.steps.current == 'auth' and socialaccount_providers %}
            <div class="card-title">{% trans "Login with username and password" %}</div>
          {% else %}
            <div class="card-title">{% trans "Login" %}</div>
          {% endif %}
          {% if wizard.steps.current == "auth" and user.is_authenticated %}
            <div class="alert warning">
              <p>
                <i class="material-icons left">warning</i>
                {% blocktrans %}You have no permission to view this page. Please login with an other account.{% endblocktrans %}
              </p>
            </div>
          {% elif wizard.steps.current == 'auth' %}
          <div class="alert primary">
            <p>
              <i class="material-icons left">info</i>
              {% blocktrans %}Please login to see this page.{% endblocktrans %}
            </p>
          </div>
          {% endif %}
          {% if not  wizard.steps.current == "auth" %}
            <div class="alert primary">
              <p>
                <i class="material-icons left">info</i>
                {% if wizard.steps.current == 'token' %}
                  {% if device.method == 'call' %}
                    {% blocktrans %}
                      We are calling your phone right now, please enter the
                      digits you hear.
                    {% endblocktrans %}
                  {% elif device.method == 'sms' %}
                    {% blocktrans %}
                      We sent you a text message, please enter the tokens we
                      sent.
                    {% endblocktrans %}
                  {% else %}
                    {% blocktrans %}
                      Please enter the tokens generated by your token
                      generator.
                    {% endblocktrans %}
                  {% endif %}
                {% elif wizard.steps.current == 'backup' %}
                  {% blocktrans %}
                    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 %}
                {% endif %}
              </p>
            </div>
          {% endif %}

          <form id="login_form" action="" method="post">
            {% csrf_token %}
            {% include "two_factor/_wizard_forms.html" %}

            {% 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" type="submit">
                    {{ other|device_action }}
                  </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">
                  {% trans "Use Backup Token" %}
                </button>
              </p>
            {% endif %}
          </form>
        </div>
        <div class="card-action-light">
          <button form="login_form" type="submit" class="btn green waves-effect waves-light">
            {% trans "Login" %}
            <i class="material-icons right">send</i>
          </button>
          {% if request.site.preferences.auth__allow_password_change %}
            <a href="{% url "account_reset_password" %}" class="btn-flat right waves-effect waves-light">
              {% trans "Reset password" %}
            </a>
          {% endif %}
        </div>
      </div>

      {% if wizard.steps.current == 'auth' and socialaccount_providers %}
        <div class="card">
          <div class="card-content">
              <div class="card-title">
                {% trans "Use alternative login options" %}
              </div>
              {% include "socialaccount/snippets/provider_list.html" with process="login" %}
          </div>
        </div>
      {% endif %}
    </div>
  </div>
{% endblock %}
