{% set html_id = sub_property.html_id %}

<div class="card">
    <div class="card-header" id="{{ html_id }}">
        <h2 class="mb-0">
            <a href="#{{ html_id }}">
                {%- if sub_property.is_additional_properties -%}
                    <em>
                {%- endif -%}
                <span class="property-name">{{ sub_property.property_display_name | escape }}</span>
                {%- if sub_property.is_additional_properties -%}
                    </em>
                {%- endif -%}
            </a>

            {%- if sub_property.is_required_property -%}
                {{ " " }}<span class="badge badge-warning required-property">Required</span>
            {%- endif -%}
            {%- if sub_property is deprecated -%}
                {{ " " }}<span class="badge badge-danger deprecated-property">Deprecated</span>
            {%- endif -%}
            {%- if sub_property.is_pattern_property -%}
                {{ " " }}<span class="badge badge-info pattern-property">Pattern Property</span>
            {%- endif -%}
        </h2>
    </div>

    <div class="card-body property-definition-div">
        {%- if sub_property.is_pattern_property -%}
            <h2 class="handle">
                <label>Pattern Property</label>
            </h2>
            <p>All properties 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>