{% set template = package('template').createPackage(theme_name) %}
{% set parent_component = parent_component|default('') %}
{% set hide_title = hide_title|default(true) %}
{% set pages = template.getPages(parent_component) %}

{% if hide_title != true %}
<div class="ui header">
    <i class="file alternate outline small blue icon"></i>    
    <div class="content">
        {{ title }}
    </div>    
</div>
<div class="ui divider"></div>
{% endif %}
<div class="ui list relaxed divided {{ class }}">
    {% for file in pages %}           
        {% set child_pages = template.getPages(file.full_name) %}  
        <div class="item">           
            <i class="file code outline icon"></i>       
            <div class="content">
                <div class="right floated content">      
                    <button 
                        class="ui mini icon basic compact button edit-file right floated" 
                        component="{{ file.full_name }}" 
                        type="pages" 
                        component-id="{{ file.id }}"  
                        theme="{{ theme_name }}" 
                        title="{{ labels.edit }}">
                        <i class="icon blue code"></i>
                    </button>  
                </div>
                <div class="header">
                    {% if child_pages|length > 0 %}
                        <a class="load-child-components" 
                            type="pages"
                            component-id="{{ file.id }}" 
                            parent="{{ file.full_name }}" 
                            theme="{{ theme_name }}">
                            <span id="component_title_{{ file.id }}" class="ui text component-title">
                                {{ file.name }}   
                            </span>
                        </a>
                    {% else %}  
                        <span id="component_title_{{ file.id }}" class="ui text component-title"> 
                            {{ file.name }} 
                        </span>  
                    {% endif %} 
                </div>
                <div id="components_content_{{ file.id }}" class="mt-1 mb-1 hidden pl-1 pr-0">
                </div>
            </div>      
        </div>
    {% endfor %}
</div>