{% set parent_component = parent_component|default('') %}
{% set hide_title = hide_title|default(true) %}
{% set template = package('template').createPackage(theme_name) %}
{% set components = template.getEmails(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 %}
{% if components is not iterable or components|length == 0 %}
<div class="ui message">
    <i class="exclamation triangle blue big icon"></i>
    {{ messages.empty }}
</div>
{% endif %}
<div class="ui list relaxed divided {{ class }}">
    {% for file in components %}       
        {% set child_components = template.getEmails(file.full_name) %}  
        {% set path = template.getComponentPath(file.full_name)  %}
        <div class="item">                             
            <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="emails"
                        component-id="{{ file.id }}"  
                        theme="{{ theme_name }}" 
                        title="{{ labels.edit }}">
                        <i class="icon blue edit"></i>
                    </button>    
                </div>    
                <div class="header">       
                    <i class="mail outline icon"></i>                  
                    <span id="component_title_{{ file.id }}" class="ui text component-title">
                        {{ file.name }}   
                    </span>                                           
                </div>               
                <div id="components_content_{{ file.id }}" class="mt-1 mb-1 hidden pl-1 pr-0">
                </div>
            </div>      
        </div>
    {% endfor %}
</div>