{% trans_default_domain 'attributes' %}
{# Load fields in edit #}
<div class="repeatables-wrap">
    {% if arrAttrValues is defined %}  
        {% if arrAttrValues is iterable %}
            {% for attr in arrAttrValues %}
                {% set counter = ( counter | default(0) ) + 1 %}
                {% set nameComponentLabel = "value_label_" ~ counter %}
                {% set nameComponentValue = "value_value_" ~ counter %}
                {% set nameComponentImage = "value_image_" ~ counter %}
                {% set nameComponentColor = "value_color_" ~ counter %}
                <div class="card item-repeatable">
                    <div class="item-repeatable-index">{{ counter }}</div>
                    <ul class="actions top-right">
                        <li><a href="javascript:void(0)" ><i class="icon dripicons-move move-item"></i></a></li>
                        <li><a href="javascript:void(0)" data-q-action="card-remove"><i class="icon dripicons-trash"></i></a></li>
                    </ul>
                    <div class="row">
                        <div class="col-sm-4">
                            <div class="form-group">
                                {{ form_label(form[nameComponentLabel]) }}
                                {{ form_widget(form[nameComponentLabel]) }}
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="form-group">
                                {{ form_label(form[nameComponentValue]) }}
                                {{ form_widget(form[nameComponentValue]) }}
                            </div>
                        </div>
                    </div>
                    <hr>
                    {% for lang in langs %}
                        <div class="row">
                            <div class="col-sm-8">
                                <div class="form-group">
                                    <label>{% trans %}name{% endtrans %} <span class="text-uppercase">{{lang.languageCode}}</span></label>
                                    {{ form_widget(attribute(form,"value_name-" ~ lang.languageCode ~ "_"~counter)) }}
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-8">
                                <div class="form-group">
                                    <label>{% trans %}description{% endtrans %} <span class="text-uppercase">{{lang.languageCode}}</span></label>
                                    {{ form_widget(attribute(form,"value_description-" ~ lang.languageCode ~ "_"~counter)) }}
                                </div>
                            </div>
                        </div>            
                        <hr>
                    {% endfor %}

                    <div class="row">
                        <div class="col-sm-8">
                            <div class="form-group">
                                {{ form_label(form[nameComponentColor]) }}
                                {{ form_widget(form[nameComponentColor]) }}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-8">
                            <div class="form-group">
                                {{ form_label(form[nameComponentImage]) }}
                                {{ form_widget(form[nameComponentImage]) }}
                            </div>
                        </div>
                    </div>
                </div>
            {% endfor %}
        {% endif %}
    {% endif %}
</div>