{% import 'contact/_contactgroupstuff.html.twig' as stuffgroup_item %}

<div class="tab_container">

    {% set i = 0 %}
    {% for contactstuff in form.contactstuffs %}
        <input type="radio" id="tab_groupstuff_{{ i }}" name="tab_groupstuffs" class="tab_selector" {{ (i is same as (0) ? 'checked="checked"') }}>
        <label for="tab_groupstuff_{{ i }}">{{ (isNotNull(contactstuff, ['vars','data','description']) ? contactstuff.vars.data.description : "---") }}</label>

        {% set i = i + 1 %}
    {% endfor %}
    <input type="radio" id="tab_groupstuff_new" name="tab_groupstuffs" class="tab_selector">
    <label for="tab_groupstuff_new" style="width: 30px" class="tab_add" data-indextab="{{ (i > 0 ? i - 1 : 0) }}" data-label="Nouveau groupe">{{ ux_icon('lucide:plus') }}</label>

    {% set wrapPrototype = '
        <div class="tab_body mb-2" style="height: 700px; background-color: #ffffff;" data-triggerid="__triggerid__">
            <div class="w-100">
                __content__
            </div>
        </div>'
    %}
    <div class="tab_bodies"
         data-prototype="{{ stuffgroup_item.getRow({form: form,groupindex: '__groupindex__'})|e('html') }}"
         data-wrap="{{ wrapPrototype|e('html') }}"
    >
        {% set i = 0 %}
        {% for contactstuff in form.contactstuffs %}
            <div class="tab_body mb-2" style="height: 700px; background-color: #ffffff;" data-groupindex="{{ i }}" data-triggerid="tab_groupstuff_{{ i }}">
                <div class="w-100">
                    {{ stuffgroup_item.getRow({contactgroupstuff: contactstuff, displays: form.vars.data.stuffsDisplay, groupindex: i}) }}
                </div>
            </div>
            {% set i = i + 1 %}
        {% endfor %}
    </div>
</div>