{% macro printBaseMaterielForm(form, i) %}
    <div class="tgo-materiel materiel_exercice" id="exercice_materiel_{{ form.vars.name }}">
        <div class="tgo-materiel_cell -categorie">
            {{ form_widget(form.categorieMateriel, {
                "attr": {
                        "data-ordre": form.vars.name
                    }
                }) 
            }}
        </div>
        <div class="tgo-materiel_cell -materiel">
            {{ form_widget(form.materiel) }}
        </div>
        <div class="tgo-materiel_cell -couleur">
            {{ form_widget(form.couleur) }}
        </div>
        <div class="tgo-materiel_cell -quantité">
            {{ form_widget(form.quantite) }}
        </div>

        <div class="tgo-materiel_cell -suppr">
            <button data-divid="exercice_materiel_{{ form.vars.name }}" class="oka-bt -ghost" {{ stimulus_action('exercice--form-collection', 'removeCollectionElement') }}>
                
                <span class="oka-bt__ico">
                    <i class="fa-solid fa-trash"></i>
                </span>
                <span class="oka-spinner"></span>
            </button>
        </div>
    </div>
{% endmacro %}




<div class="tgo-materiels"

    {{ stimulus_controller('exercice--form-collection') }}

    data-exercice--form-collection-index-value="{{ form.exercicesMateriels|length > 0 ? form.exercicesMateriels|last.vars.name + 1 : 0 }}"
    data-exercice--form-collection-prototype-value="{{ _self.printBaseMaterielForm(form.exercicesMateriels.vars.prototype, form.exercicesMateriels|length)|e('html_attr') }}"
>

    <div class="tgo-materiel">
        <div class="tgo-materiel_cell -categorie">
            <span class="oka-label">Catégorie</span>
        </div>
        <div class="tgo-materiel_cell -materiel">
            <span class="oka-label">Matériel</span>
        </div>
        <div class="tgo-materiel_cell -couleur">
            <span class="oka-label">Couleur</span>
        </div>
        <div class="tgo-materiel_cell -quantite">
            <span class="oka-label">Quantité</span>
        </div>
        <div class="tgo-materiel_cell -suppr">
            
        </div>
    </div>

    <div {{ stimulus_target('exercice--form-collection', 'collectionContainer') }}>
       {% set n = 0 %}
       {% for exerciceMateriel in form.exercicesMateriels %}
            {{ _self.printBaseMaterielForm(exerciceMateriel, n) }}
            {%  set n = n + 1 %}
        {% endfor %}
    </div>
    <button type="button" class="oka-bt -outlined " style="width:140px" {{ stimulus_action('exercice--form-collection', 'addCollectionElement') }}>
        <span class="oka-bt__ico"><i class="fa-solid fa-add"></i></span>
        <span class="oka-bt__lbl">Ajouter</span>
        <span class="oka-spinner"></span>
    </button>
</div>