{% for ing, listref in data %}

    {% set infoIng = (ing | split('|')) %}
    <div class="encart-reference" data-info-ing="{{ infoIng[0] | encode }}">
        <h6>{{ infoIng[1] }}</h6>
        {% for ref in listref %}
            {% set infoRef = (ref | split('|'))%}
            <div class="row">
                <div class="col-6 p-1 my-auto">
                    <i class="fa-solid fa-circle fa-2xs me-1"></i> {{ infoRef[1] }}
                </div>
                <div class="col-3">
                    <div class="row justify-content-center">{{ infoRef[3] }}</div>
                    <div class="row justify-content-center">{{ infoRef[2] }} </div>

                </div>
                <div class="col-2 text-center my-auto">
                    {{ infoRef[4] }}
                </div>
                <div class="col-1 my-auto px-0 text-center grocery-line" data-info-ref="{{ infoRef[0] | encode }}" data-info-ing="{{ infoIng[0] | encode }}">
                    <i class="fa-solid fa-trash fa-xs pointer"></i>
                </div>
            </div>
        {% endfor %}
    </div>
    <hr/>
{% endfor %}