{% 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 case_detail in case_details %}

        <li id="case-detail-{{case_detail.pk}}"{% if case_detail.question_schema %} class="cases"{% endif %}>
            <h2>Case: {{ case_detail.case.title }}</h2>
            
            {% if case_detail.question_schema %}
                <button class="btn btn-sm btn-secondary use-layout">Use schema</button>
                <details><summary>Schema:</summary>
                <div class="schema" data-schema='{{ case_detail.get_question_schema }}'>{{ case_detail.question_schema }}</div>
                </details>
                <div class="form"></div>
            {% else %}
                <p>No question(s)</p>
            {% endif %}
                
        </li>

    {% endfor %}
</ol>

<script>

    $(document).ready(function() {
        $(".cases").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>