{% block javascripts %}
    <script type="text/javascript" src="{{ asset('js/jquery/jquery-3.5.1.js', 'portal') }}"></script>
    <script type="text/javascript">
        // keep track of how many telefono fields have been rendered
        var telefonoCount = '{{ telefonos|length }}';
        $(document).ready(function() {
            $('#add-another-telefono').click(function(e) {
                e.preventDefault();
                var telefonoFieldDiv = $('#telefono-fields-div');
                var telefonosDiv = $('#telefono-div');
                // grab the prototype template
                var newWidgetNumero = telefonoFieldDiv.attr('data-prototype-numero');
                var newWidgetEtiqueta = telefonoFieldDiv.attr('data-prototype-etiqueta');
                // replace the "__name__" used in the id and name of the prototype
                // with a number that's unique to your telefonos
                // end name attribute looks like name="contact[telefonos][2]"
                newWidgetNumero = telefonoFieldDiv.children()[0].outerHTML.replace(/__name__/g, telefonoCount);
                newWidgetNumero = telefonoFieldDiv.children()[0].outerHTML.replace('disabled="disabled"', '');
                newWidgetEtiqueta = telefonoFieldDiv.children()[1].outerHTML.replace(/__name__/g, telefonoCount);
                newWidgetEtiqueta = telefonoFieldDiv.children()[1].outerHTML.replace('disabled="disabled"', '');
                telefonoCount++;
                // create a new list element and add it to the list
                var div_padre=$('<div class="row"></div>');
                var botonAdd=$('<button type="button" onclick="removeTelefono(this.parentElement)"'
                    +'    class="btn btn-floating red darken-2" style="margin-top: 20px;" title="Borrar">'
                    +'    <i class="material-icons" style="margin: 0px;">delete</i>'
                    +'</button>');
                div_padre.append(newWidgetNumero);
                div_padre.append(newWidgetEtiqueta);
                div_padre.append(botonAdd);
                div_padre.appendTo(telefonosDiv);
                e.currentTarget.blur();
            });
        })
        
        function removeTelefono(li) {
            li.remove();
        }
    </script>
{% endblock %}

<div class="row">
    {{ form_errors(telefonos) }}
    <div id="telefono-div">
        {% for indice, telefono in telefonos %}
            <div class="row">
                <div class="col s12 m5 l5">
                    {{form_row(telefono.children.numero)}}
                </div>
                <div class="col s12 m5 l5">
                    {{form_row(telefono.children.etiqueta)}}
                </div>
                <button type="button" onclick="removeTelefono(this.parentElement)"
                    class="btn btn-floating red darken-2" style="margin-top: 20px;" title="Borrar">
                    <i class="material-icons" style="margin: 0px;">delete</i>
                </button>
            </div>
        {% endfor %}
    </div>
    <div class="row" id="telefono-fields-div">
        <div class="col s12 m5 l5">
            {{form_row(telefonos.vars.prototype.children.numero, {'attr': {'disabled':'disabled'}})}}
        </div>
        <div class="col s12 m5 l5">
            {{form_row(telefonos.vars.prototype.children.etiqueta, {'attr': {'disabled':'disabled'}})}}
        </div>
        <a href="#" id="add-another-telefono" class="btn-floating waves-effect waves-light btn-secondary "
            style="margin-top: 20px;"
            title="Agregar Telefono">
            <i class="material-icons right">add</i>
        </a>
    </div>
    {% do telefonos.setRendered %}
</div>