{% load grapesjs_tags %}

{% if not widget.value and widget.template_choices %}
<select id="select-{{ widget.attrs.id }}" onchange="getSource(this, '{{ widget.apply_django_tag }}', '{{ widget.attrs.id }}')">
   {% for data_tuple in widget.template_choices %}
   <option value="{{ data_tuple.0 }}">{{ data_tuple.1 }}</option>
   {% endfor %}
</select>
{% endif %}

<textarea hidden name="{{ widget.name }}" {% include "django/forms/widgets/attrs.html" %}>
{% if widget.value %}{{ widget.value }}{% else %}<div>{{ widget.get_render_html_value }}</div>{% endif %}</textarea>
<div hidden name='get-all-id'>{{ widget.attrs.id }}</div>
<div id="gjs-{{ widget.attrs.id }}"></div>

{% include widget.html_name_init_conf %}

<script type="text/javascript">
    this["initData" + "{{ widget.attrs.id }}"]['container'] = '#gjs-{{ widget.attrs.id }}';
    var editor_{{ widget.attrs.id }} = grapesjs.init(this["initData" + "{{ widget.attrs.id }}"]);

    if ({% get_settings_value "GRAPESJS_DEFAULT_MODELS_DATA" True %}) {
        try {
            editor_{{ widget.attrs.id }}.setComponents(
                replaceTag(
                    normalizeData(document.getElementById("{{ widget.attrs.id }}").value, false),
                    replaceTagsInit
                )
            )
        } catch (e) {
            editor_{{ widget.attrs.id }}.setComponents(
                "Error in the template: <br>name: " + e.name + "<br>message: " + e.message + "<br>"
            )
        }
    }

</script>


