{% block _packages_composants_widget %}
    {% set selected = [] %}
    {% if data is defined %}
        {% for obj in data %}
            {% set selected = selected | merge([obj.id]) %}
        {% endfor %}
    {% endif %}
    {% if choices is defined %}
        {% include 'packages/_hierarchie.html.twig' with {'rang': 0} %}
    {% endif %}
{% endblock %}
{% form_theme form _self %}

{% if package.id != null %}
    <div class="row">
        <paper-card id="formulaire-delete" class="flex-12">
            {{ include('packages/_delete_form.html.twig') }}
        </paper-card>
    </div>
{% endif %}

{{ form_start(form) }}
<div class="row">
    <paper-card id="formulaire" class="flex-xl-9 flex-lg-8 flex-md-7 flex-sm-7 flex-xs-12">
        <div class="layout horizontal">
            <div class="flex">{{ form_row(form.libelle) }}</div>
            <div class="flex">{{ form_row(form.code) }}</div>
            <div class="flex">{{ form_row(form.idComposantApplicable) }}</div>
            <div class="flex">{{ form_row(form.idFormule) }}</div>
            <div class="flex">{{ form_row(form.dateValiditeDebut) }}</div>
            <div class="flex">{{ form_row(form.dateValiditeFin) }}</div>
            <div class="flex">{{ form_row(form.description) }}</div>
            <div class="flex">{{ form_row(form.formatResultat) }}</div>
        </div>
        <div class="layout horizontal">
            {{ form_widget(form.submit) }}
        </div>
        {% if composants is defined %}
            <div class="subhead-2">Composants actuels</div>
            <div class="row">
                {% for composant in composants %}
                    <div class="flex-md-3 flex-sm-6 flex-xs-12">
                        <mgc-type-composant
                                code="{{ composant.idTypeComposant.code }}"
                                libelle="{{ composant.idTypeComposant.libelle }}"
                                couleur="{{ composant.idTypeComposant.couleur }}">
                        </mgc-type-composant>
                        {{ composant.nom }}
                    </div>
                {% endfor %}
            </div>
        {% endif %}
    </paper-card>
    <paper-card id="hierarchie" class="flex-xl-3 flex-lg-4 flex-md-5 flex-sm-5 flex-xs-12">
        <div class="subhead-2">Choix des composants</div>
        {{ form_row(form.composants) }}

        <div class="filtres" style="background-color: white;">
            <label for="toggleOld" onclick="window.toggleOld.click()">Afficher les éléments passés</label>
            <paper-checkbox id="toggleOld" onchange="window.hierarchie.toggleClass('show-old')"></paper-checkbox>
        </div>
    </paper-card>
</div>
{{ form_end(form) }}