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

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

{% block extra_head %}
  {{ wizard.form.media.css }}
{% 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">
      <form action="" method="post">
        {% csrf_token %}
        <div class="card">
          <div class="card-content">
            {% if oauth and oauth_application.icon %}
              <div class="center-via-flex margin-bottom">
                <div class="application-circle materialboxed z-depth-2">
                  <img src="{{ oauth_application.icon.url }}" alt="{{ oauth_application.name }}"
                       class="hundred-percent">
                </div>
              </div>
              <div class="card-title center">
                {% blocktrans with name=oauth_application.name %}Login for {{ name }}{% endblocktrans %}
              </div>
            {% elif 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' %}
              {% if oauth %}
                <div class="alert primary">
                  <p>
                    <i class="material-icons left">info</i>
                    {% blocktrans %}Please login with your account to use the external application.{% endblocktrans %}
                  </p>
                </div>
              {% else %}
                <div class="alert primary">
                  <p>
                    <i class="material-icons left">info</i>
                    {% blocktrans %}Please login to see this page.{% endblocktrans %}
                  </p>
                </div>
              {% endif %}
            {% 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 code we sent.
                      {% endblocktrans %}
                    {% elif device.method == 'email' %}
                      {% blocktrans %}
                        We sent you an email, please enter the code we sent.
                      {% endblocktrans %}
                    {% elif device.method == 'webauthn' %}
                      {% blocktrans %}
                        Please use your Webauthn-compatible device to authenticate.
                      {% endblocktrans %}
                    {% else %}
                      {% blocktrans %}
                        Please enter the code generated by your code 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 %}

            {% include "two_factor/_wizard_forms.html" %}
          </div>
          <div class="card-action-light login-card-action">
            <button 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_reset and wizard.steps.current == "auth" %}
              <a href="{% url "account_reset_password" %}" class="btn-flat right waves-effect waves-red">
                {% trans "Reset password" %}
              </a>
            {% endif %}
          </div>
        </div>

        {% if other_devices or backup_tokens %}
          <div class="card">
            <div class="card-content">
              <div class="card-title">{% trans "Device currently not available?" %}</div>
              {% if other_devices %}
                <p>{% trans "Alternatively, use one of your other authentication methods:" %}</p>
                <p>
                  {% for other in other_devices %}
                    <button name="challenge_device" value="{{ other.persistent_id }}"
                            class="btn waves-effect waves-light margin-bottom"
                            type="submit">
                      {{ other|as_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 waves-effect waves-light">
                    {% trans "Use Backup Token" %}
                  </button>
                </p>
              {% endif %}
            </div>
          </div>
        {% endif %}
      </form>

      {% 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>

  {{ wizard.form.media.js }}
{% endblock %}
