{% load wagtailadmin_tags %}

<div class="{{ classname }}">
    {% if help_text %}
        <div class="object-help help">
            {% icon name="help" %}
            {{ help_text }}
        </div>
    {% endif %}

    {% for child in children.values %}
        <div class="field {% if child.block.required %}required{% endif %}" data-contentpath="{{ child.block.name }}">
            {% if child.block.label %}
                <label class="field__label" {% if child.id_for_label %}for="{{ child.id_for_label }}"{% endif %}>{{ child.block.label }}</label>
            {% endif %}
            {{ child.render_form }}

            {% comment %}
            This block triggers the autosize() function by faking an input event after the
            document is fully loaded. It isn't pretty, but it works.
            {% endcomment %}
            {% if child.block.label == "Code" %}
                <script>
                document.addEventListener('DOMContentLoaded', function() {
                    var ta = document.getElementById('{{ child.id_for_label }}');
                    var evt = new Event('input');
                    ta.dispatchEvent(evt);
                });
                </script>
            {% endif %}
        </div>
    {% endfor %}

    <pre><code id="{{ prefix }}-target"></code></pre>
</div>
