{% if idParent is not defined %}
    {% set idParent = null %}
    {% for choice in choices %}
        {% if choice.data.idParent == null %}
            {% set idParent = choice.data.id %}
        {% endif %}
    {% endfor %}
{% endif %}

{% set hierarchie = [] %}
{% for choice in choices %}
    {% if choice.data.idParent and choice.data.idParent.id == idParent %}
        {% set hierarchie = hierarchie | merge([choice]) %}
    {% endif %}
{% endfor %}

{% if hierarchie | length > 0 %}
    <paper-listbox class="rang-{{ rang }}">
        {% for obj in hierarchie %}
            {% set nbEnfants = 0 %}
            {% for choice in choices %}
                {% if choice.data.idParent and choice.data.idParent.id == obj.data.id %}
                    {% set nbEnfants = nbEnfants + 1 %}
                {% endif %}
            {% endfor %}

            {% if nbEnfants > 0 or obj.data.idTypeComposant.peutAvoirTarif %}
                <div {% if obj.data.dateValiditeFin and obj.data.dateValiditeFin < date() %} old {% endif %}>
                    <paper-item>
                        <paper-item-body class="flex" two-line>
                            <div class="layout horizontal center">
                                {% if nbEnfants > 0 %}
                                    <paper-icon-button
                                            icon="icons:chevron-right"
                                            onclick="collapse{{ obj.data.id }}.toggle();this.icon = collapse{{ obj.data.id }}.opened ? 'icons:expand-more' : 'icons:chevron-right'">
                                    </paper-icon-button>
                                {% else %}
                                    <paper-icon-button icon="icons:remove"></paper-icon-button>
                                {% endif %}
                                <span class="nom {% if rang < 2 %}body-2{% else %}body-1{% endif %}"
                                      onclick="this.previousElementSibling.click()">
                                    <mgc-type-composant
                                            code="{{ obj.data.idTypeComposant.code }}"
                                            libelle="{{ obj.data.idTypeComposant.libelle }}"
                                            couleur="{{ obj.data.idTypeComposant.couleur }}">
                                    </mgc-type-composant>
                                    {{ obj.data.nom }}
                                </span>
                                <div class="actions">
                                    {% if obj.data.idTypeComposant.peutAvoirTarif %}
                                        <input
                                                type="checkbox"
                                                name="packages[composants][]"
                                                value="{{ obj.value }}"
                                                {% if obj.data.id in selected %}checked{% endif %}>
                                    {% endif %}
                                </div>
                            </div>
                            {% if obj.data.dateValiditeDebut or obj.data.dateValiditeFin %}
                                <div secondary>
                                    {% if obj.data.dateValiditeDebut and obj.data.dateValiditeFin %}
                                        Du {{ obj.data.dateValiditeDebut | date('d/m/Y') }} au {{ obj.data.dateValiditeFin | date('d/m/Y') }}
                                    {% elseif obj.data.dateValiditeDebut %}
                                        A partir du {{ obj.data.dateValiditeDebut | date('d/m/Y') }}
                                    {% else %}
                                        Jusqu'au Du {{ obj.data.dateValiditeFin | date('d/m/Y') }}
                                    {% endif %}
                                </div>
                            {% endif %}
                        </paper-item-body>
                    </paper-item>
                    <iron-collapse id="collapse{{ obj.data.id }}">
                        <div class="collapse-content">
                            {% include 'packages/_hierarchie.html.twig' with {'rang': rang + 1, 'idParent': obj.data.id} %}
                        </div>
                    </iron-collapse>
                </div>
            {% endif %}
        {% endfor %}
    </paper-listbox>
{% endif %}