{% 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 email fields have been rendered
        var emailCount = '{{ emails|length }}';
        $(document).ready(function() {
            $('#add-another-email').click(function(e) {
                e.preventDefault();
                var emailFieldDiv = $('#email-fields-div');
                var emailsDiv = $('#email-div');
                // grab the prototype template
                var newWidgetCorreo = emailFieldDiv.attr('data-prototype-correo');
                var newWidgetEtiqueta = emailFieldDiv.attr('data-prototype-etiqueta');
                // 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]"
                newWidgetCorreo = emailFieldDiv.children()[0].outerHTML.replace(/__name__/g, emailCount);
                newWidgetCorreo = emailFieldDiv.children()[0].outerHTML.replace('disabled="disabled"', '');
                newWidgetEtiqueta = emailFieldDiv.children()[1].outerHTML.replace(/__name__/g, emailCount);
                newWidgetEtiqueta = emailFieldDiv.children()[1].outerHTML.replace('disabled="disabled"', '');
                emailCount++;
                // create a new list element and add it to the list
                var div_padre=$('<div class="row"></div>');
                var botonAdd=$('<button type="button" onclick="removeEmail(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(newWidgetCorreo);
                div_padre.append(newWidgetEtiqueta);
                div_padre.append(botonAdd);
                div_padre.appendTo(emailsDiv);
                e.currentTarget.blur();
            });
        })
        
        function removeEmail(li) {
            li.remove();
        }
    </script>
{% endblock %}

<div class="row">
    {{ form_errors(emails) }}
    <div id="email-div">
        {% for indice, email in emails %}
            <div class="row">
                <div class="col s12 m5 l5">
                    {{form_row(email.children.correo)}}
                </div>
                <div class="col s12 m5 l5">
                    {{form_row(email.children.etiqueta)}}
                </div>
                <button type="button" onclick="removeEmail(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="email-fields-div">
        <div class="col s12 m5 l5">
            {{form_row(emails.vars.prototype.children.correo, {'attr': {'disabled':'disabled'}})}}
        </div>
        <div class="col s12 m5 l5">
            {{form_row(emails.vars.prototype.children.etiqueta, {'attr': {'disabled':'disabled'}})}}
        </div>
        <a href="#" id="add-another-email" class="btn-floating waves-effect waves-light btn-secondary "
            style="margin-top: 20px;"
            title="Agregar Email">
            <i class="material-icons right">add</i>
        </a>
    </div>
    {% do emails.setRendered %}
</div>