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

{% block extrastyle %}{{ block.super }}
    <link rel="stylesheet" href="{% static "admin/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 nav-breadcrumbs %}{% endblock %}

{% block content %}
    {% if form.errors and not form.non_field_errors %}
        <p class="errornote">
            {% blocktranslate count counter=form.errors.items|length %}Please correct the error below.{% plural %}Please
                correct the errors below.{% endblocktranslate %}
        </p>
    {% endif %}

    {% if form.non_field_errors %}
        {% for error in form.non_field_errors %}
            <p class="errornote">
                {{ error }}
            </p>
        {% endfor %}
    {% endif %}

    <div id="content-main">

        {% if user.is_authenticated %}
            <p class="errornote">
                {% blocktranslate trimmed %}
                    You are authenticated as {{ username }}, but are not authorized to
                    access this page. Would you like to login to a different account?
                {% endblocktranslate %}
            </p>
        {% endif %}

        <form action="{{ app_path }}" method="post" id="login-form">{% csrf_token %}
            <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 }}
                <input type="hidden" name="next" value="{{ next }}">
            </div>
            <div class="form-row">
                {{ form.otp.errors }}
                {{ form.otp.label_tag }} {{ form.otp }}
            </div>
            <input type="hidden" name="domain" value="{{ site.domain }}">
            {% url 'admin_password_reset' as password_reset_url %}
            {% if password_reset_url %}
                <div class="password-reset-link">
                    <a href="{{ password_reset_url }}">{% translate 'Forgotten your password or username?' %}</a>
                </div>
            {% endif %}
            <div class="submit-row">
                <input type="submit" value="{% translate 'Log in' %}">
            </div>
        </form>
    </div>
    <style>
        #id_otp {
            clear: both;
            padding: 8px;
            width: 100%;
            box-sizing: border-box;
        }
    </style>
{% endblock %}
