{% extends "admin/change_form.html" %}
{% load static %}

{% block content %}
  {{ block.super }}
  {% block admin_change_form_document_ready %}
    {{ block.super }}
    <script type="text/javascript" src="{% static 'js/dynamic_admin.js' %}"></script>
    <script type="text/javascript">
    {% for field_name in adminform.model_admin.dynamic_select_fields %}
      DynamicAdmin.dynamicSelect("{{ opts.app_label }}", "{{ opts.model_name }}", "{{ field_name }}");
    {% endfor %}
    {% for field_name in adminform.model_admin.dynamic_input_fields %}
      DynamicAdmin.dynamicInput("{{ opts.app_label }}", "{{ opts.model_name }}", "{{ field_name }}");
    {% endfor %}
    </script>
  {% endblock %}
{% endblock %}

{# Jazzmin-Support: the extrajs block is added in the jazzmin admin templates and won't do any harm for normal django admin#}
{% block extrajs %}
  {{ block.super }}
  <script>
    // Find all select2 instances in the current change form and trigger the change event manually
    // whenever the select2 instance changes it's value.
    $(function() {
      $('.select2-hidden-accessible').each(function (i, select) {
        var $select = $(select);
        $select.on('change', function(event) {
          console.log($(event.target).closest("form"))
          var form = $(event.target).closest('form')[0];
          // for some reason, jQuery's .trigger() method does't seem to work here, so we trigger a change event manually
          if (form) {
            form.dispatchEvent(new Event("change"));
          }
        })
      })
    });
  </script>
{% endblock %}