{% overextends "wagtailadmin/pages/edit.html" %}
{% load i18n %}
{% load wagtailadmin_tags %}

{# Put this in core/templateswagtailadmin/pages/edit.html. Assumes overextends. #}

{% block extra_js %}
    {% include "wagtailadmin/pages/_editor_js.html" %}

    <script>
        (function($, window, document) {

            window.lastClickedIgnoredTrigger = false;

            function enableDirtyFormCheck(formSelector, options) {
                var defaultSelector = 'input[type="submit"], button[type="submit"]';
                var ignoredButtonsSelector = options.ignoredButtonsSelector ? options.ignoredButtonsSelector : defaultSelector;

                var $form = $(formSelector);
                var $ignoredButtons = $form.find(ignoredButtonsSelector);

                var confirmationMessage = options.confirmationMessage || ' ';
                var alwaysDirty = options.alwaysDirty || false;
                var initialData = $form.serialize();

                $ignoredButtons.each(function(index) {
                    var $el = $(this);

                    $el.on('click', function(e) {
                        window.lastClickedIgnoredTrigger = this;
                    })
                });

                window.addEventListener('beforeunload', function(event) {
                    // Ignore if the user clicked on an ignored element
                    var triggeredByIgnoredButton = false;
                    var $trigger = $(event.explicitOriginalTarget || document.activeElement);

                    $ignoredButtons.each(function() {
                        if ($(this).is($trigger) || this === window.lastClickedIgnoredTrigger) {
                            triggeredByIgnoredButton = true;
                        }
                    });

                    if (dirtyFormCheckIsActive && !triggeredByIgnoredButton && (alwaysDirty || $form.serialize() != initialData)) {
                        event.returnValue = confirmationMessage;
                        return confirmationMessage;
                    }
                });
            }

            $(function() {
                /* Make user confirm before leaving the editor if there are unsaved changes */
                {% trans "This page has unsaved changes." as confirmation_message %}
                enableDirtyFormCheck(
                    '#page-edit-form',
                    {
                        confirmationMessage: '{{ confirmation_message|escapejs }}',
                        {% if form.errors %}
                            alwaysDirty: true,
                        {% endif %}
                    }
                );
            });
        })($, window, document);
    </script>
{% endblock %}