{{ include('flash.html.twig') }}
{{ form_start(productForm, {'attr': {'novalidate': 'novalidate'}}) }}
<div class="contact-form col-lg-12">
    <div class="col-lg-12 text-center text-light">
        {{ form_errors(productForm) }}
    </div> 

    <div>
        {{ form_label(productForm.name) }}
        {{ form_widget(productForm.name) }}
        {{ form_errors(productForm.name) }}
    </div>

    <div>
        {{ form_label(productForm.description) }}
        {{ form_widget(productForm.description) }}
        {{ form_errors(productForm.description) }}
    </div>

    <div>
        {{ form_label(productForm.price) }}
        {{ form_widget(productForm.price) }}
        {{ form_errors(productForm.price) }}
    </div>

    <div>
        {{ form_label(productForm.stock) }}
        {{ form_widget(productForm.stock) }}
        {{ form_errors(productForm.stock) }}
    </div>

   
    <div class="my-1 p-1">
        <h6 class="text-light">Images</h6>
        <ul class="tags" data-prototype="{{ form_row(productForm.productImages.vars.prototype)|escape }}" data-index="{{ productForm.productImages|length }}">
            {% for imageForm in productForm.productImages %}
                <li>
                    {% if imageForm.vars.data.imageName is empty %}
                        {{ form_row(imageForm.imageFile) }}
                        <a class="remove-image">Supprimer</a>
                    {% else %}
                        {{ form_row(imageForm.imageFile, {
                            'attr': { 'style':'display:none' }
                        }) }}
                    {% endif %}
                </li>
            {% endfor %}
        </ul>
        <a href="#" class="add_item_link btn btn-light mt-3" tabindex="-1" role="button">Ajouter une image</a>
    </div>
    

    <div>
        {{ form_widget(productForm.submit) }}
    </div>
</div>
{{ form_row(productForm._token) }} {# CSRF token field #}
{{ form_end(productForm, {render_rest: false}) }}


<script>
    document.addEventListener('DOMContentLoaded', function () {
        let collectionHolder = document.querySelector('ul.tags');
        let addButton = document.querySelector('.add_item_link');
        let prototype = collectionHolder.dataset.prototype;
        let index = collectionHolder.dataset.index;

        addButton.addEventListener('click', function (e) {
            e.preventDefault();
            let newForm = prototype.replace(/__name__/g, index);
            let li = document.createElement('li');
            li.innerHTML = newForm;
            collectionHolder.appendChild(li);
            index++;
            collectionHolder.dataset.index = index;
        });

        // Removing an image
        collectionHolder.addEventListener('click', function (e) {
            if (e.target && e.target.classList.contains('remove-image')) {
                e.preventDefault();
                e.target.closest('li').remove();
            }
        });




});
</script>