{% load i18n %}
{% for component, component_instance, component_form in components %}
    <section class="component-form{% if component.required %} component-form--required{% endif %} {% if not component.required and not component_form.enabled.value %} component-form--disabled{% endif %}">
        <h3>{{ component.heading }}</h3>
        {% if component.help_text %}<p>{{ component.help_text }}</p>{% endif %}

        <ul class="fields component-form__fields">
            {% for field in component_form.visible_fields %}
                {% include "wagtailadmin/shared/field_as_li.html" with li_classes="component-form__fieldname-"|add:field.name %}
            {% endfor %}

            {% for field in component_form.hidden_fields %}{{ field }}{% endfor %}
        </ul>

        {% if not component.required %}
            <button type="button" class="button button-small component-form__enable-button">{% if component.enable_text %}{{ component.enable_text }}{% else %}{% trans "Enable" %}{% endif %}</button>
            <button type="button" class="button button-small no component-form__disable-button">{% if component.disable_text %}{{ component.disable_text }}{% else %}{% trans "Disable" %}{% endif %}</button>
        {% endif %}
    </section>
{% endfor %}
