{% set formEditTemplate = app.request.xmlHttpRequest ? 'default/_form_modal.html.twig' : 'default/_form.html.twig' %}
{% set formOptions = {
    'title': team.name|default('create'|trans),
    'form': form,
    'back': path('admin_team'),
    'reset': false
} %}
{% embed formEditTemplate with formOptions %}
    {% block form_body %}
        <div class="row">
            <div class="col-md-9">
                {{ form_row(form.name) }}
            </div>
            <div class="col-md-3">
                {{ form_row(form.color) }}
            </div>
        </div>
        {{ form_row(form.users) }}
        {{ form_row(form.members) }}
        {{ form_widget(form) }}
    {% endblock %}
    {% block form_after %}
        {% set blockPrefix = form.vars.id %}
        <script type="text/javascript">
            jQuery(document).ready(function () {
                jQuery('#{{ blockPrefix }}_users').change(function (e) {
                    var select = jQuery(e.target);
                    var selected = select.find(':selected');
                    var username = selected.text();
                    var userid = select.val();
                    selected.remove();

                    var prototype = jQuery('#{{ blockPrefix }}_members');
                    var counter = prototype.data('widget-counter') || prototype.children().length;
                    var newWidget = prototype.attr('data-prototype');
                    newWidget = newWidget.replace(/__name__/g, counter);
                    newWidget = newWidget.replace(/__USERNAME__/g, username);
                    prototype.data('widget-counter', ++counter);
                    jQuery(newWidget).prependTo(prototype).find('input[type=hidden]').val(userid);
                });
            });
        </script>
    {% endblock %}
{% endembed %}