<script nonce={{ csp_nonce() if csp_nonce else "" }}>
    {% set const_name = 'editor_' + target_id | replace('-', '_') %}
    {% if use_htmx %}
    var const_name = htmx.find("#{{ target_id }}")
    {% else %}
    var const_name = document.querySelector("#{{ target_id }}")
    {% endif %}

    {% if enable_watchdog %}
        var watchdog = new CKSource.EditorWatchdog();
        window.watchdog = watchdog;
        watchdog.setCreator((element, config) => {
            return CKSource.Editor
                .create(element, config)
                .then(editor => {
                    window.editor = editor
                    return editor;
                })
        });
        watchdog.setDestructor(editor => {
            return editor.destroy();
        });
        watchdog.on('error', handleError);
        watchdog
    {% else %}
        {% set editor_class = editor_type.split('-')[0] %}
        {{ editor_class | capitalize() + 'Editor' }}
    {% endif %}
            .create(const_name, {
                licenseKey: "{{ license_key or '' }}",
                {% if upload_endpoint %}
                simpleUpload: {
                    uploadUrl: '{{ url_for(upload_endpoint) }}',
                        withCredentials: true,
                        {% if enable_csrf %}
                        headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'}
                        {% endif %}
                },
                {% endif %}
                {% if extra_config %}
                    {% for key, val in extra_config.items() recursive %}
                        {% set outer_loop = loop %}
                        {% if val is mapping %}
                             {{ key|safe }}: { {{ outer_loop(val.items()) }} }
                        {% elif val is sequence and val is not string %}
                            {{ key|safe }}: [ 
                                {% for inner_val in val recursive %}
                                    {% if inner_val is mapping %}
                                        { {{ outer_loop(inner_val.items()) }} }
                                    {% elif inner_val is sequence and inner_val is not string %}
                                        [ loop(inner_val) ]
                                    {% else %}
                                        {% if inner_val is string and inner_val[0] == '%' %}
                                            {{ inner_val[1:] | safe }}
                                        {% else %}
                                            {{ inner_val | tojson }}
                                        {% endif %}
                                    {% endif %}
                                    {% if not loop.last %}
                                    ,
                                    {% endif%}
                                {% endfor %}
                            ]
                        {% else %}
                            {{ key | safe }}:
                            {% if val is string and val[0] == '%' %}
                                {{ val[1:] | safe }}
                            {% else %}
                                {{ val | tojson }}
                            {% endif %}
                        {% endif %}
                        {% if not loop.last %}
                        ,
                        {% endif%}
                    {% endfor %}
                {% endif %}
            })
    {% if not enable_watchdog %}
            .then(NewEditor => {
        window.editor = NewEditor;
    })
    {% endif %}
            .catch(handleError);

    function handleError(error) {
        console.error('Oops, something went wrong!');
        console.error(error);
    }
    {% if use_htmx %}
    htmx.find('#submit').addEventListener('click', (evt) => {
        window.editor.updateSourceElement()
    })
    {% endif %}
</script>