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

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

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

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

{% block content_title %}{% endblock %}

{% block breadcrumbs %}{% endblock %}

{% block content %}
    {% if form.errors and not form.non_field_errors %}
        <p class="errornote">
            {% 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="errornote">
                {{ error }}
            </p>
        {% endfor %}
    {% endif %}

    <div id="content-main">
        <form action="{{ app_path }}" method="post" id="login-form">{% csrf_token %}
            <div class="form-row">
                {{ form.username.errors }}
                <label for="id_username"
                       class="required">{{ form.username.label }}:</label> {{ form.username }}
            </div>
            <div class="form-row">
                {{ form.password.errors }}
                <label for="id_password"
                       class="required">{% trans 'Password:' %}</label> {{ form.password }}
                <input type="hidden" name="next" value="{{ next }}"/>
            </div>
            {% url 'admin_password_reset' as password_reset_url %}
            {% if password_reset_url %}
                <div class="password-reset-link">
                    <a href="{{ password_reset_url }}">{% trans 'Forgotten your password or username?' %}</a>
                </div>
            {% endif %}
            <div class="submit-row">
                <label>&nbsp;</label><input type="submit" value="{% trans 'Log in' %}"/>
            </div>
        </form>

        {% sqrl as sqrl_session %}

        <form method="get" action="{{ sqrl_session.sqrl_url }}" class="sqrl">
            <p class="align-center or">
                <span class="line-center">or</span>
            </p>

            <div>
                <h3>Login using SQRL</h3>

                <div class="sqrl-wrap">
                    SQRL Login
                    <a href="{{ sqrl_session.sqrl_url }}">
                        <div id="sqrl-qr" data-sqrl="{{ sqrl_session.sqrl_url }}"></div>
                    </a>
                    <a href="https://www.grc.com/sqrl/sqrl.htm">What is SQRL?</a>
                </div>

                <div class="submit-row">
                    <input type="hidden" name="nut" value="{{ sqrl_session.nut.nonce }}">
                    <input type="submit" value="{% trans 'Log in using SQRL' %}"/>
                </div>
            </div>
        </form>

        <script type="text/javascript">
            SQRL_CHECK_URL="{% sqrl_status_url_script_tag sqrl_session %}"
            document.getElementById('id_username').focus()
        </script>
        <script type="application/javascript" src="{% static 'sqrl/sqrl.js' %}"></script>
    </div>
{% endblock %}