{% extends 'system/base_site.html' %}

{% load i18n static %}

{% block extrastyle %}
    {{ block.super }}{{ form.media }}
{% endblock %}
    
{% block section %}
    <section class="hero is-fullheight1 is-light is-bold">
        <div class="hero-body">
            <div class="container">
                <div class="columns is-centered">
                    <div class="column is-5-desktop is-5-widescreen is-8-tablet">
                        <div class="box p-6" id="login">
                            <div class=" has-text-centered mb-5">
                                <h1 class="title has-text-grey-dark">{{ title }}</h1>
                                <p class="subtitle has-text-grey-dark">{{ site_title }}</p>
                            </div>
                            
                            {% block auth_form %}
                            {% if form.errors and not form.non_field_errors %}
                            <b-notification
                                type="is-danger is-light"
                                aria-close-label="Close notification"
                                role="alert">
                            {% blocktranslate count counter=form.errors.items|length %}Please correct the error below.{% plural %}Please correct the errors below.{% endblocktranslate %}
                            </b-notification>
                            {% endif %}
                
                            {% if user.is_authenticated %}
                            <b-notification
                                type="is-danger is-light"
                                aria-close-label="Close notification"
                                role="alert">
                            {% 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 %}
                            </b-notification>
                            {% endif %}
                            <form action="{{ app_path }}" method="post" id="login-form">{% csrf_token %}
                                {{ form.as_buefy }}
                                {% 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 class="button is-primary is-fullwidth" type="submit" value="{% translate 'Log in' %}">
                                </div>
                            </form>
                            <p class="has-text-right mt-3">
                                <a class="has-text-link" href="{% url 'system:register' %}">没有账号，立即注册>></a>
                            </p>
                            {% endblock %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}


{% block extravue %}
    <script>
        var login = new Vue({
            el: '#login',
            delimiters: ['{$', '$}'],
        })
    </script>
    <script>
        $('img.captcha').click(function() {
            $.getJSON('/captcha/refresh/',function(json) {
                // This should update your captcha image src and captcha hidden input
                $("img.captcha").attr("src",json.image_url);
                $("#id_captcha_0").val(json.key);
            });
            return false;
        });
    </script>
{% endblock %}
    