{% extends "admin/base.html" %}

{% block header %}
  Create {{ model_name | replace('_', ' ') | title }}
{% endblock %}

{% block content %}
<div id="editor_holder"></div>
<div class="pt-6 flex gap-4">
  <form method="post" id="submit_form">
    <button type="submit"
            class="px-5 py-2 bg-green-600 text-white text-sm font-medium rounded hover:bg-green-700">
      Create
    </button>

    <input type="hidden" name="editor_data" id="editor_data" value="">
  </form>
  <a href="{{ url_prefix }}/models/{{ model_name }}"
      class="px-5 py-2 bg-gray-200 text-gray-800 text-sm font-medium rounded hover:bg-gray-300">
    Cancel
  </a>
</div>
<script>

      var editor = new JSONEditor(document.getElementById('editor_holder'),{
        ajax: true,
        required_by_default: false,
        show_opt_in: true,
        collapsed: true,
        disable_properties: true,

        // The schema for the editor
        schema: {
          $ref: "{{ url_prefix }}/models/{{ model_name }}/json?cdefaults=true&phase=create",
          format: "grid",
        },
      });

      var editor_data = document.getElementById("editor_data")
      document.getElementById("submit_form").addEventListener("submit", async function(ev){
        editor_data.value = JSON.stringify(editor.getValue())
      })
</script>
{% endblock %}
