{% set editable = properties.gePropertiesList(true) %}
{% set readonly = properties.gePropertiesList(false,false) %}
{% set groups = properties.getGroups() %}
{% set show_readonly = show_readonly|default(true) %}

{% if editable is empty and readonly is empty %}
    <div class="ui segment">
        {{ labels.empty }}
    </div>
{% endif %}

{{ component('components:properties.items',{ items: editable }) }}

{% for group in groups %}
    {% set editable = properties.gePropertiesList(true,false,group.value) %}  
    <div class="ui segment">
        <div class="ui accordion field property-group">
            <div class="title">
                <i class="dropdown icon"></i>
                {{ group.title }}
            </div>
            <div class="content">
                {{ component('components:properties.items',{ items: editable }) }}   
            </div>
        </div>
    </div>   
{% endfor %}

{% if readonly is not empty and show_readonly == true %}
    <div class="ui segment">
        <h5>{{ labels.readonly }}</h5>
        <div class="ui list">
        {% for property in readonly %}  
            <div class="item">                   
                <div class="ui basic fluid label">
                    {{ property.title }}
                    <div class="detail">
                        {% set value = (property.hidden == true) ? labels.hidden : property.value %}                          
                        {{ value|string }}
                    </div>   
                </div>                                                     
            </div>
        {% endfor %}
        </div>
    </div>            
{% endif %}