<div class="ui tab" data-tab="associations">
    <h3 class="ui top attached header">{{ 'sylius.ui.associations'|trans }}</h3>

    <div class="ui attached segment">
        {% for associationForm in form.associations %}
            <div class="field">
                {{- form_label(associationForm) -}}
                <div class="product-select ui fluid multiple search selection dropdown" data-url="{{ path('sylius_admin_ajax_product_index', {'limit': 20}) }}">
                    {{ form_widget(associationForm, {'attr': {'class': 'autocomplete'}}) }}
                    <i class="dropdown icon"></i>
                    <div class="default text">{{'sylius.ui.select_products'|trans}}</div>
                    <div class="menu">
                        {% for association in product.associations %}
                            {% if association.type.code == associationForm.vars.name %}
                                {% for associatedProduct in association.associatedProducts %}
                                    <div class="item" data-value="{{ associatedProduct.code }}">{{ associatedProduct.name|default(associatedProduct.code) }}</div>
                                {% endfor %}
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>
                {{ form_errors(associationForm) }}
            </div>
        {% endfor %}

        {{ sylius_template_event(['sylius.admin.product.' ~ action ~ '.tab_associations', 'sylius.admin.product.tab_associations'], {'form': form}) }}
    </div>
</div>
