{% if not form.contactos.vars.verificar and not form.contactos.vars.ver %}
    <div class="alert alert-warning" role="alert">
        <i class="bi bi-exclamation-circle"></i>
        Puede duplicar los datos de los contactos utilizando el botón 'Copiar de'
    </div>
{% endif %}

<div data-controller="contactos-form"
     data-action="{{ [
         'contacto-row:loaded->contactos-form#contactoRowLoaded',
         'contacto-row:addToDuplicarDe->contactos-form#addToDuplicarDe'
     ]|join(' ') }}"
>
{% for contacto in form.contactos %}
    <div class="{{ html_classes('card', 'contacto-row', 'mb-4', {
        'verificar': form.contactos.vars.verificar,
        'ver': form.contactos.vars.ver
    }) }}" {{ stimulus_controller('contacto-row', {
        'contactoTipoId': contacto.vars.contacto_tipo_id,
        'contactoTipoNombre': contacto.vars.contacto_tipo_nombre
    }) }} data-contactos-form-target="contactoRow" data-action="telefono-row:changed->contacto-row#telefonoRowChanged">
        <div class="card-header">
            {% if not contacto.vars.verificar and not form.contactos.vars.ver %}
                <div class="btn-group duplicar-de">
                    <button id="dropdownMenuButton{{ contacto.vars.contacto_tipo_id }}" disabled
                            class="btn btn-secondary gray-disabled dropdown-toggle" type="button"
                            data-bs-toggle="dropdown" aria-expanded="false" data-contacto-row-target="duplicarDeButton">
                        Copiar de
                    </button>
                    <ul class="dropdown-menu"
                        aria-labelledby="dropdownMenuButton{{ contacto.vars.contacto_tipo_id }}"
                        data-contacto-row-target="duplicarDeList">
                    </ul>
                </div>
            {% endif %}
            <h4 class="contacto-title">
                {{ contacto.vars.contacto_tipo_nombre }}
            </h4>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-3">
                    {{ form_row(contacto.nombres) }}
                </div>
                <div class="col-3">
                    {{ form_row(contacto.apellidos) }}
                </div>
                <div class="col-6">
                    {{ form_row(contacto.telefono, {row_attr: contacto.telefono.vars.row_attr|merge({
                        'data-contacto-row-target': 'telefonoRow'
                    })}) }}
                </div>
                <div class="col-12">
                    {{ form_row(contacto.email) }}
                    {{ form_row(contacto.boletines, {
                        attr: {
                            'data-contacto-row-target': 'boletinesCheck'
                        },
                        row_attr:{
                            class: (contacto.boletines.vars.row_attr.class|default('') ~ ' form-group mt-2')|trim
                        }
                    }) }}
                </div>
            </div>
        </div>
    </div>
{% else %}
    {% do form.setRendered %}
{% endfor %}
</div>