{% block _appbundle_trainings_team_members_entry_widget %}
    {{name}}
    {{form_widget(form.tagName)}}
    {% endblock _appbundle_trainings_team_members_entry_widget %}

<script>
       $( document ).ready(function() {
            var $wrapper = $('.js-members-wrapper');
            $wrapper.on('click', '.js-remove-member', function(e) {
                e.preventDefault();
                $(this).closest('.js-member-item')
                    .fadeOut()
                    .remove();
            });
                $wrapper.on('click', '.js-member-add', function(e) {
                e.preventDefault();
                // Get the data-prototype explained earlier
                var prototype = $wrapper.data('prototype');
                // get the new index
                var index = $wrapper.data('index');
                // Replace '__name__' in the prototype's HTML to
                // instead be a number based on how many items we have
                var newForm = prototype.replace(/__name__/g, index);
                // increase the index with one for the next item
                $wrapper.data('index', index + 1);
                // Display the form in the page before the "new" link
                $(this).before(newForm);
            });
        });
    </script>

{% form_theme form '_team_members_theme.html.twig' %}

{{form_start(form)}}
    <div class="row js-members-wrapper"
         data-prototype="{{ form_widget(form.team.members.vars.prototype)|e('html_attr') }}"
         data-index="{{ form.team.members|length }}"
    >

    {% for memberForm in form.team.members %}
        {{ form_widget(memberForm) }}
    {% endfor %}


        <a href="#" class="js-member-add">
            <span class="fa fa-plus-circle"></span>
    Add Another Tag
        </a>
    </div>

<input type="submit" value="submit">
{% endblock %}