{% if hierarchie | length > 0 %}
    <paper-listbox class="rang-{{ rang }}" multi>
        {% for obj in hierarchie %}
            <div {% if obj.composant.dateValiditeFin and obj.composant.dateValiditeFin < date() %} old {% endif %} >
                <paper-item class="composant-item" composant-name="{{ obj.composant.nom }}" composant-ref="{{ obj.composant.code }}">
                    <paper-item-body class="flex" two-line>
                        <div class="layout horizontal center">
                            {% if obj.enfants | length > 0 %}
                                <paper-icon-button
                                        icon="{% if idComposantsParents is defined and obj.composant.id in idComposantsParents %}icons:expand-more{% else %}icons:chevron-right{% endif %}"
                                        onclick="collapse{{ obj.composant.id }}.toggle();this.icon = collapse{{ obj.composant.id }}.opened ? 'icons:expand-more' : 'icons:chevron-right';hierarchie.selected = {{ obj.composant.id }}">
                                </paper-icon-button>
                            {% else %}
                                <paper-icon-button
                                        icon="icons:remove"
                                        onclick="hierarchie.selected = {{ obj.composant.id }}">
                                </paper-icon-button>
                            {% endif %}
                            <span class="nom {% if rang < 2 %}body-2{% else %}body-1{% endif %}"
                                  onclick="this.previousElementSibling.click();{% if obj.composant.idTypeComposant.peutEditer %}xhrComponent.open('{{ path('composants_show', {'id': obj.composant.id}) }}', 'show-composant'){% endif %}">
                                <mgc-type-composant
                                        code="{{ obj.composant.idTypeComposant.code }}"
                                        libelle="{{ obj.composant.idTypeComposant.libelle }}"
                                        couleur="{{ obj.composant.idTypeComposant.couleur }}">
                                </mgc-type-composant>
                                {{ obj.composant.nom }}
                            </span>
                            <div class="actions">
                                {% if obj.composant.idTypeComposant.peutEditer %}
                                    <paper-tooltip for="btn_edit_{{ obj.composant.id }}">Modifier</paper-tooltip>
                                    <paper-icon-button
                                            id="btn_edit_{{ obj.composant.id }}"
                                            icon="editor:mode-edit"
                                            onclick="xhrComponent.open('{{ path('composants_edit', {'id': obj.composant.id}) }}', 'edit-composant')">
                                    </paper-icon-button>
                                    <paper-tooltip for="btn_delete_{{ obj.composant.id }}">Supprimer</paper-tooltip>
                                    <paper-icon-button
                                            id="btn_delete_{{ obj.composant.id }}"
                                            icon="icons:clear"
                                            onclick="xhrComponent.open('{{ path('composants_delete', {'id': obj.composant.id}) }}', 'delete-composant')">
                                    </paper-icon-button>
                                {% endif %}
                            </div>
                        </div>
                        {% if obj.composant.dateValiditeDebut or obj.composant.dateValiditeFin %}
                            <div secondary>
                                {% if obj.composant.dateValiditeDebut and obj.composant.dateValiditeFin %}
                                    Du {{ obj.composant.dateValiditeDebut | date('d/m/Y') }} au {{ obj.composant.dateValiditeFin | date('d/m/Y') }}
                                {% elseif obj.composant.dateValiditeDebut %}
                                    A partir du {{ obj.composant.dateValiditeDebut | date('d/m/Y') }}
                                {% else %}
                                    Jusqu'au Du {{ obj.composant.dateValiditeFin | date('d/m/Y') }}
                                {% endif %}
                            </div>
                        {% endif %}
                    </paper-item-body>
                </paper-item>
                {% if obj.enfants | length > 0 %}
                    <iron-collapse id="collapse{{ obj.composant.id }}"
                                   {% if idComposantsParents is defined and obj.composant.id in idComposantsParents %}opened{% endif %}>
                        <div class="collapse-content">
                            {% include 'composants/_hierarchie.html.twig' with {'hierarchie': obj.enfants, 'rang': rang + 1} %}
                        </div>
                    </iron-collapse>
                {% endif %}
            </div>
        {% endfor %}
    </paper-listbox>
{% endif %}