{% extends "admin/change_form.html" %}

{% block object-tools %}
{{ block.super }}<script>
django.jQuery(function () {
    // ace editor cannot be attached directly to a textarea
    var textarea = django.jQuery('textarea').css('display', 'none');
    var settings = textarea.data();
    var div = django.jQuery('<div>', {
        position: 'absolute',
        width: '100%',
        height: textarea.height(),
        'class': textarea.attr('class')
    }).insertBefore(textarea);

    // init editor with settings
    var editor = ace.edit(div[0]);
    var darkMode;

    if (window.parent.CMS.API.Helpers.getColorScheme) {
        darkMode = window.parent.CMS.API.Helpers.getColorScheme() === 'dark';
    } else {
        // django CMS pre-3.11.1
        darkMode =  window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
    }
    if (darkMode) {
        editor.setTheme('ace/theme/tomorrow_night');
    }  else {
        editor.setTheme('ace/theme/github');
    }
    editor.getSession().setValue(textarea.val());
    editor.getSession().setMode('ace/mode/html');
    editor.setOptions({
        fontSize: '14px',
        cursorStyle: 'smooth'
    });
    editor.renderer.setScrollMargin(5, 5);

    // send data back to textarea when submitting
    textarea.closest('form').submit(function () {
        textarea.val(editor.getSession().getValue());
    });

    // immediate update while typing inside CKEditor
    editor.getSession().on('change', function () {
        textarea.val(editor.getSession().getValue());
    });
});
</script>
{% endblock %}
