{% load static i18n %}

<div class="container-fluid authplus-login">

  {% block titlebar %}
    {% include "authplus/include/auth_titlebar.html" %}
  {% endblock titlebar %}

  <div class="row justify-content-center authplus-login-errors">
    {% if form.errors and not form.non_field_errors %}
      <p class="alert alert-danger"><i class="bi bi-x-square"></i>
        {% if form.errors.items|length == 1 %}
          {% trans "Please correct the error below." %}
        {% else %}
          {% trans "Please correct the errors below." %}
        {% endif %}
      </p>
    {% endif %}

    {% if form.non_field_errors %}
      {% for error in form.non_field_errors %}
        <p class="alert alert-danger"><i class="bi bi-x-square"> {{ error }}</i></p>
      {% endfor %}
    {% endif %}
  </div>

  <div class="row justify-content-center authplus-login-form">
    <div class="login-box col-9 col-sm-6 col-md-5 col-lg-4 col-xl-3">
      <div class="login-title row justify-content-center">
        {% block login-title %}{% trans "User Login" %}{% endblock login-title %}
      </div>
      <div class="row justify-content-center">
        <div class="col-md-11">
          <form class="login-form" method="POST" action="{% url 'authplus:login' %}">
            {% csrf_token %}
            <div class="form-group">
              <div class="input-group">
                <span class="login-label input-group-addon"><i class="bi bi-person-fill"></i></span>
                <input type="text" name="username" id="id_username" class="form-control" maxlength="254" placeholder={% trans "username" %} autofocus required />
              </div>
            </div>
            <div class="form-group">
              <div class="input-group">
                <span class="login-label input-group-addon"><i class="bi bi-lock-fill"></i></span>
                <input type="password" name="password" id="id_password" class="form-control" placeholder={% trans "password" %} required />
              </div>
            </div>
            <input type="hidden" name="next" value="{{ next }}" />
            <div class="d-flex justify-content-center">
              <button class="login-btn btn btn-primary btn-block" type="submit">{% trans "Login" %}</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

</div>