<script src="https://cdn.jsdelivr.net/npm/jsoneditor@9.4.0/dist/jsoneditor.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsoneditor@9.4.0/dist/jsoneditor.min.css">
<div class="form-label">{{ label }}</div>
<div id="{{ name }}" class="form-group mb-3"></div>
{% if help_text %}
    <small class="form-hint">
        {{ help_text }}
    </small>
{% endif %}
<input {% if not null %}required{% endif %} type="text" name="{{ name }}" value='{{ value|safe }}' hidden>
<style>
    .jsoneditor {
        border: 1px solid #dadcde;
        border-radius: 4px;

    }

    .jsoneditor-menu {
        background-color: rgba(35, 46, 60, .7);
        border-bottom: #dadcde;
    }

</style>
<script>
    const container_{{ name }} = document.getElementById("{{name}}")
    let options_{{ name }} = {{options|safe}};
    if (Object.keys(options_{{ name }}).length === 0) {
        options_{{ name }} = {
            modes: ['tree', 'view', 'form', 'code', 'text', 'preview'],
        }
    }
    options_{{ name }}.onChangeText = function (json) {
        $('input[name={{ name }}]').val(json);
    }
    const editor_{{ name }} = new JSONEditor(container_{{ name }}, options_{{ name }})
    {% if value %}
        editor_{{ name }}.set({{ value|safe }})
    {% endif %}
    editor_{{ name }}.expandAll();
</script>
