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

{% block furniture %}
    <style>
        .galtinn-login { margin-bottom: 2em; }
        .local-login-toggle {
            background: none;
            border: 0;
            padding: 0;
            color: inherit;
            cursor: pointer;
            font-size: 0.85em;
            text-decoration: underline;
        }
        .guard-pig {
            height: 8rem;
            background-color: currentColor;
            -webkit-mask: url("{% static 'graphics/guard-pig.svg' %}") no-repeat center / contain;
            mask: url("{% static 'graphics/guard-pig.svg' %}") no-repeat center / contain;
        }
    </style>
    <main class="content-wrapper" id="main">
        <h1>cms.neuf.no</h1>

        <div class="messages" role="status">
            {# Always show messages div so it can be appended to by JS #}
            {% if messages or form.errors %}
                <ul>
                    {% for error in form.non_field_errors %}
                        <li class="error">{{ error }}</li>
                    {% endfor %}
                    {% for message in messages %}
                        <li class="{{ message.tags }}">{{ message }}</li>
                    {% endfor %}
                </ul>
            {% endif %}
        </div>

        {% if oidc_enabled %}
            <div class="galtinn-login">
                <a class="button" href="{% url 'oidc_login' %}{% if next %}?next={{ next|urlencode }}{% endif %}">
                    Logg inn med Galtinn
                </a>
            </div>

            <button type="button" class="local-login-toggle" aria-expanded="false"
                    aria-controls="local-login" {% if form.errors %}hidden{% endif %}>
                Logg inn med lokal bruker
            </button>
        {% endif %}

        <div class="local-login" id="local-login" {% if oidc_enabled and not form.errors %}hidden{% endif %}>
            <form class="login-form" action="{% url 'wagtailadmin_login' %}" method="post" autocomplete="off" novalidate>
                {% csrf_token %}

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

                {% formattedfield form.username %}
                {% formattedfield form.password %}

                {% if show_password_reset %}
                    <a class="reset-password" href="{% url 'wagtailadmin_password_reset' %}">{% trans "Forgotten password?" %}</a>
                {% endif %}

                {% for field_name, field in form.extra_fields %}
                    {% formattedfield field %}
                {% endfor %}

                {% include "wagtailadmin/shared/forms/single_checkbox.html" with label_classname="remember-me" name="remember" text=_("Remember me") %}

                <footer class="form-actions">
                    <button
                        type="submit"
                        class="button button-longrunning"
                        data-controller="w-progress"
                        data-action="w-progress#activate"
                        data-w-progress-active-value="{% trans 'Signing in…' %}"
                    >
                        {% icon name="spinner" %}
                        <em data-w-progress-target="label">{% trans 'Sign in' %}</em>
                    </button>
                </footer>
            </form>
        </div>

        <div class="login-logo">
            <div class="guard-pig" aria-hidden="true"></div>
        </div>
    </main>
    <script>
        const toggle = document.querySelector(".local-login-toggle");
        toggle?.addEventListener("click", () => {
            document.querySelector(".local-login").hidden = false;
            toggle.setAttribute("aria-expanded", "true");
            toggle.hidden = true;
            document.querySelector("#id_username").focus();
        });
    </script>
{% endblock %}