{% load static %}
{% comment %} <script src="{% static 'js/jquery-3.7.1.min.js' %}"></script>
<script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.min.js"></script> {% endcomment %}
<ol>
    {% for question_schema in question_schemas %}

        <li class="schemas">
            <button class="btn btn-sm btn-secondary use-layout">Use schema</button>
            <details><summary>{{question_schema.name}}</summary>
                <div class="schema" data-schema='{{question_schema.get_schema_as_json|safe}}'>{{question_schema.schema}}</div>
            </details>
            <div class="form"></div>

        </li>

    {% endfor %}
</ol>

<script>

    $(document).ready(function() {
        $(".schemas").each(function(n, el){
            console.log(n, el);
            form_el = $(el).find(".form").get(0);
            schema = $(el).find(".schema").get(0).dataset.schema;
            console.log(schema)
            console.log(form_el)
            form = new JSONEditor(form_el, {
                schema: JSON.parse(schema),
                theme: 'bootstrap4',
                disable_edit_json: true,
                disable_collapse: true,
                disable_properties: true,
            });

        });

    });

</script>

<style>
</style>