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

{% if hide_title != true %}
    <div class="ui header">
        <i class="project diagram blue small icon"></i>
        <div class="content">
            {{ title }}
        </div>    
    </div>
    <div class="ui divider"></div>
{% endif %}
<div class="ui list relaxed divided {{ class }}">
    {% for file in components %}       
        {% set child_components = template.getComponents(file.full_name) %}  
        {% set path = template.getComponentPath(file.full_name)  %}
        <div class="item">           
            <i class="file code outline icon"></i>              
            <div class="content">               
                <button 
                    class="ui mini icon basic compact button edit-file right floated" 
                    component="{{ file.full_name }}" 
                    component-id="{{ file.id }}" 
                    type="components" 
                    theme="{{ theme_name }}"
                    title="{{ labels.edit }}">
                    <i class="icon blue code"></i>
                </button>     
                <div class="header">
                    {% if child_components|length > 0 %}
                        <a class="load-child-components" 
                            component-id="{{ file.id }}" 
                            parent="{{ file.full_name }}" 
                            type="components" 
                            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>