<script>

    ;
    (function ($) {
        'use strict';

        $(function() {
            $(document).on('click', 'a[data-collection-button="add"]', function (e) {
                e.preventDefault();
                var collectionContainer = $('#' + $(this).data('collection'));
                var isArray = collectionContainer.data('is-php-array');
                var prototype = $('#' + $(this).data('prototype')).data('prototype');
                var item = prototype.replace(/__name__/g, collectionContainer.children().length + (undefined == isArray ? 0 : 1));
                collectionContainer.append(item);
            });

            $(document).on('click', 'a[data-collection-button="delete"]', function (e) {
                e.preventDefault();
                var item = $(this).closest('.' + $(this).data('collection') + '-' + $(this).data('collection-item'));
                item.remove();
            });
        });
    })(jQuery);

</script>

<div class="tab-pane" id="attributes">
    <div
            id="sylius-assortment-product-attributes"
            class="collection-container"
            data-prototype="{{ ('<div id="sylius_product_attributes___name__">' ~ form_row(form.extraFields.vars.prototype.extraField, {'attr': {'class': 'attribute-chooser'}}))|e }}{{ (form_row(form.extraFields.vars.prototype.value) ~ '</div>')|e }}">

        {% for attributeForm in form.extraFields %}
            <div class="sylius-assortment-product-attributes-attribute row">
                <div class="col-md-10">
                    {{ form_widget(attributeForm) }}
                </div>
                <div class="col-md-2">
                    <a href="#" class="btn btn-danger"
                       data-collection-button="delete"
                       data-collection="sylius-assortment-product-attributes"
                       data-collection-item="attribute">
                        <i class="glyphicon glyphicon-trash"></i>&nbsp;{{ 'sylius.product.remove_attribute'|trans }}
                    </a>
                </div>
            </div>
        {% endfor %}
        {% for key, prototype in form.extraFields.vars.prototype.vars.prototypes %}
            <div id="attribute-prototype_{{ key }}" class="attribute-prototypes"
                 data-prototype="{{ form_widget(prototype)|e }}"></div>
        {% endfor %}
        {#</div>#}

        <a href="#"
           class="btn btn-success btn-block"
           data-collection-button="add"
           data-prototype="sylius-assortment-product-attributes"
           data-collection="sylius-assortment-product-attributes"
        >
            {{ 'sylius.product.add_attribute'|trans }}
        </a>
    </div>
