{% set html_id = sub_property.html_id %}
<div class="row my-2">
    <div class="col">
        <div class="accordion" id="accordion{{ html_id }}">
            <div class="accordion-item">
                <h2 class="accordion-header" id="heading{{ html_id }}">
                    <button class="accordion-button{% if not expanded %} collapsed{% endif %}" type="button"
                            data-bs-toggle="collapse"
                            data-bs-target="#{{ html_id }}"
                            aria-expanded="{{ expanded }}" aria-controls="{{ html_id }}"
                            onclick="setAnchor('#{{ html_id }}')">

                        {% if sub_property.is_additional_properties %}
                            <em>
                        {% endif %}
                        <span class="property-nam align-middle pb-1">{{ sub_property.property_display_name | lowerfirst | escape }}</span>
                        {% if sub_property.is_additional_properties %}
                            </em>
                        {% endif %}
                        {% if sub_property.is_required_property %}
                            {{ " " }}<span class="badge bg-warning required-property ms-2">Required</span>
                        {% endif %}
                        {% if sub_property is deprecated %}
                            {{ " " }}<span class="badge bg-danger deprecated-property ms-2">Deprecated</span>
                        {% endif %}
                        {% if sub_property.is_pattern_property %}
                            {{ " " }}<span class="badge bg-info pattern-property ms-2">Pattern Property</span>
                        {% endif %}
                    </button>
                </h2>
                <div id="{{ html_id }}"
                     class="accordion-collapse collapse{% if expanded %} show{% endif %}"
                     aria-labelledby="heading{{ html_id }}"
                     data-parent="#accordion{{ html_id }}">
                    <div class="accordion-body">
                        {% if sub_property.is_pattern_property %}
                            <h2 class="handle">
                                <label>Pattern Property</label>
                            </h2>
                            <p>All property whose name matches the following regular expression must respect the
                                following
                                conditions</p>
                            <span class="pattern-value">Property name regular expression: <code>{{ sub_property.property_name | escape }}</code></span>
                            <br/>
                        {% endif %}

                        {% if sub_property.is_additional_properties %}
                            {% if sub_property.is_additional_properties_schema %}
                                <p class="additional-properties">Each additional property must conform to the following
                                    schema</p>
                            {% else %}
                                <p class="additional-properties">Additional Properties of any type are allowed.</p>
                            {% endif %}
                        {% endif %}

                        {{ content(sub_property) }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>