{% import _self as formMacros %}
{{ form_start(form) }}
<div class="row">
    <div class="col-12">
        {{ form_label(form.name) }}
        {{ form_widget(form.name) }}
    </div>
</div>
<div class="row">
    <div class="col-5">
        {{ form_label(form.mail) }}
        {{ form_widget(form.mail) }}
    </div>
    <div class="col-5">
        {{ form_label(form.phone) }}
        {{ form_widget(form.phone) }}
    </div>
    <div class="col-2">
        {{ form_label(form.nb_children) }}
        {{ form_widget(form.nb_children) }}
    </div>
</div>
<div class="row">
    <div class="col-12">
        {{ form_label(form.description) }}
        {{ form_widget(form.description) }}
    </div>
</div>
{% if form.adresses is defined %}
<h3>Adresses</h3>
<div class="adresses" data-index="{{ form.adresses|length > 0 ? form.adresses|last.vars.name + 1 : 0 }}" data-prototype="{{ formMacros.printRow(form.adresses.vars.prototype)|e('html_attr') }}">
</div>
<button type="button" class="btn btn-primary add_item_link" data-collection-holder-class="adresses">
    <i class="bi bi-plus"></i>&nbsp;Ajouter une adresse
</button>
{% endif %}
{{ form_rest(form) }}
<div class="d-flex flex-row-reverse bd-highlight mt-2">
    <button class="{{ button_class|default('btn') }} mt-2">{{ button_label|default('Enregistrer') }}</button>
</div>
{{ form_end(form) }}
{% macro printRow(AdressForm) %}
{{ include('family_address/_form.html.twig',{'form':AdressForm}) }}
{% endmacro %}
<script type="text/javascript">
function addFormToCollection(e) {
    const collectionHolder = document.querySelector('.' + e.currentTarget.dataset.collectionHolderClass);

    const item = document.createElement('div');

    item.innerHTML = collectionHolder
        .dataset
        .prototype
        .replace(
            /__name__/g,
            collectionHolder.dataset.index
        );
    collectionHolder.appendChild(item.children[0].children[0]);

    collectionHolder.dataset.index++;
    addEvent();
}

function removeFormFromCollection(e) {
    const collectionHolder = document.querySelector('.' + e.currentTarget.dataset.collectionHolderClass);
    const tr = e.currentTarget.parentNode.parentNode;
    const tr2 = tr.nextElementSibling;

    tr.remove();
    tr2.remove();
}

function addEvent() {
    document
        .querySelectorAll('.add_item_link')
        .forEach(btn => btn.addEventListener("click", addFormToCollection));

    document
        .querySelectorAll('.remove_item_link')
        .forEach(btn => btn.addEventListener("click", removeFormFromCollection));
}

addEvent();
</script>