{% form_theme form 'bootstrap_4_layout.html.twig' %}
{% extends 'base.html.twig' %}

{% block body %}
    <section id="floating-label-layouts">
        <div class="col-md-12 col-12">
            {% if block ('title') is defined %}
                <h1 class="card-title text-uppercase">{{ block('title') }}</h1>
            {% endif %}
            <div class="card">
                <div class="card-content">
                    <div class="card-body">
                        {{ form_start(form) }}
                        <div class="form-body">
                            {{ form_row(form) }}
                            <button class="btn btn-success">{{ button_label|default('Enregistrer') }}</button>
                        </div>
                        {{ form_end(form) }}
                    </div>
                </div>
            </div>
        </div>

    </section>


{% endblock %}

{% block javascripts %}
    <script>
        jQuery(document).ready(function () {

            $($('.add-another-collection-widget').attr('data-list-selector')).find('fieldset').each(function() {
                addTagFormDeleteLink($(this));
            });

            jQuery('.add-another-collection-widget').click(function (e) {
                var list = jQuery(jQuery(this).attr('data-list-selector'));

                // Try to find the counter of the list or use the length of the list
                var counter = list.data('widget-counter') || list.children().length;
                console.log(counter)
                // grab the prototype template
                var newWidget = list.attr('data-prototype');
                // replace the "__name__" used in the id and name of the prototype
                // with a number that's unique to your emails
                // end name attribute looks like name="contact[emails][2]"
                newWidget = newWidget.replace(/__name__label__/g, counter);
                newWidget = newWidget.replace(/__name__/g, counter);
                // Increase the counter
                counter++;
                // And store it, the length cannot be used if deleting widgets is allowed
                list.data('widget-counter', counter);

                // create a new list element and add it to the list
                var newElem = jQuery(list.attr('data-widget-tags')).html(newWidget);
                newElem.appendTo(list);
                addTagFormDeleteLink(newElem);
            });


            function addTagFormDeleteLink($tagFormLi) {
                var $removeFormA = $('<a href="#">effacer</a>');
                $tagFormLi.append($removeFormA);

                $removeFormA.on('click', function(e) {
                    e.preventDefault();
                    $tagFormLi.remove();
                });
            }

        });
    </script>
{% endblock %}