{% extends "wagtailadmin/admin_base.html" %}
{% load i18n wagtailadmin_tags %}
{% block titletag %}{% trans "Sign in" %}{% endblock %}
{% block bodyclass %}login{% endblock %}

{% block extra_css %}
    {{ block.super }}

    <link rel="stylesheet" href="{% versioned_static 'wagtailadmin/css/layouts/login.css' %}" type="text/css" />
{% endblock %}

{% block furniture %}
    <main class="content-wrapper">
        {% if messages or form.errors %}
            <div class="messages">
                <ul>
                    {% if form.errors %}
                        <li class="error">{% blocktrans trimmed %}Your {{ username_field }} and password didn't match. Please try again.{% endblocktrans %}</li>
                    {% endif %}
                    {% for message in messages %}
                        <li class="{{ message.tags }}">{{ message }}</li>
                    {% endfor %}
                </ul>
            </div>
        {% endif %}

        {% block above_login %}{% endblock %}

        <form action="{% url 'wagtailadmin_login' %}" method="post" autocomplete="off" novalidate>
            {% block login_form %}
                {% csrf_token %}

                {% url 'wagtailadmin_home' as home_url %}
                <input type="hidden" name="next" value="{{ next|default:home_url }}" />

                <h1>{% block branding_login %}{% trans "Sign in to Wagtail" %}{% endblock %}</h1>

                <div class="fields-wrapper">
                    <ul class="fields">
                        {% block fields %}
                            <li class="full">
                                <div class="field iconfield">
                                    {{ form.username.label_tag }}
                                    <div class="input icon-user">
                                        {{ form.username }}
                                    </div>
                                </div>
                            </li>
                            <li class="full">
                                <div class="field iconfield">
                                    {{ form.password.label_tag }}
                                    <div class="input icon-password">
                                        {{ form.password }}
                                    </div>
                                </div>
                            </li>

                            {% block extra_fields %}
                                {% for field_name, field in form.extra_fields %}
                                    <li class="full">
                                        {{ field.label_tag }}
                                        <div class="field iconfield">
                                            {{ field }}
                                        </div>
                                    </li>
                                {% endfor %}
                            {% endblock extra_fields %}

                            <li class="checkbox">
                                <div class="field">
                                    <label><input name="remember" type="checkbox" />{% trans "Remember me" %}</label>
                                </div>
                            </li>
                        {% endblock %}

                        <li class="submit">
                            {% block submit_buttons %}
                                <button type="submit" class="button button-longrunning" data-clicked-text="{% trans 'Signing in…' %}">{% icon name="spinner" %}<em>{% trans 'Sign in' %}</em></button>
                            {% endblock %}
                        </li>
                    </ul>

                    {% if show_password_reset %}
                        <p class="help">
                            <a class="help__link" href="{% url 'wagtailadmin_password_reset' %}" aria-label="{% trans 'Reset your password' %}">{% trans "Forgotten password?" %}</a>
                        </p>
                    {% endif %}
                </div>
            {% endblock %}
        </form>

        {% block below_login %}{% endblock %}

    </main>
{% endblock %}

{% block extra_js %}
    {{ block.super }}
    <script>
        $(function(){
            $('form input[name=username]').trigger('focus');
        })
    </script>
{% endblock %}
