{% set email_placeholder = 'Correo de la dependencia o de la persona encargada' %}

<div id="contactoComunicacionEmails" class="clearfix">
    {% for comunicacionTipo in terceroService.contactoTipos(tercero, true) %}
        {% set contactosComunicacion = tercero.contactosByTipo(comunicacionTipo) %}
        {% set contactosSize = contactosComunicacion|length %}
        <div class="{{ html_classes('card contacto-row mb-4 contacto-comunicacion', {'ver': formulario.ver}) }}"
             data-comunicacion-tipo="{{ comunicacionTipo.id }}"
             data-comunicacion-tipo-nombre="{{ comunicacionTipo.nombreCorto }}"
        >
            <div class="card-header">
                <h5 class="contacto-title">
                    {{ comunicacionTipo.nombre }}
                </h5>
                {% if not formulario.ver %}
                    <div class="btn-group duplicar-de">
                        <button id="dropdownMenuButton{{ comunicacionTipo.id }}" disabled
                                class="btn btn-secondary gray-disabled dropdown-toggle" type="button"
                                data-bs-toggle="dropdown" aria-expanded="false">
                            Copiar de
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton{{ comunicacionTipo.id }}">
                        </ul>
                    </div>
                {% endif %}
            </div>
            <div class="card-body">
                {% for key, contactoComunicacion in contactosComunicacion %}
                    <div class="row inputs-row">
                        <div class="col-6 col-md-3">
                            <twig:Form:Input name="{{ 'contactos_comunicacion[' ~ comunicacionTipo.id ~ '][' ~ key ~ '][nombres]' }}"
                                             class="contactos-comunicacion-nombres"
                                             object="{{ contactoComunicacion }}" objectProperty="nombres"
                                             label="Nombres" :required="true" />
                        </div>
                        <div class="col-6 col-md-3">
                            <twig:Form:Input name="{{ 'contactos_comunicacion[' ~ comunicacionTipo.id ~ '][' ~ key ~ '][apellidos]' }}"
                                             class="contactos-comunicacion-apellidos"
                                             object="{{ contactoComunicacion }}" objectProperty="apellidos"
                                             label="Apellidos" :required="true" />
                        </div>
                        <div class="col-12 col-md-6">
                            {#value="{{ contactoComunicacion.email }}"#}
                            <twig:Formulario:Label name="{{ 'contactos_comunicacion[' ~ comunicacionTipo.id ~ '][' ~ key ~ '][email]' }}" :required="true">
                                Correo electrónico
                            </twig:Formulario:Label>
                            <div class="input-email-borrar">
                                <twig:Form:Input name="{{ 'contactos_comunicacion[' ~ comunicacionTipo.id ~ '][' ~ key ~ '][email]' }}"
                                                 class="contactos-comunicacion-email"
                                                 object="{{ contactoComunicacion }}" objectProperty="email"
                                                 type="email"
                                                 placeholder="{{ email_placeholder }}"
                                                 :required="true" :showErrores="false" />
                                {% if contactosSize > 1 and not formulario.ver %}
                                    <button class="btn btn-outline-danger contactos-comunicacion-delete" type="button">Eliminar</button>
                                {% endif %}
                            </div>
                            <twig:Form:InvalidFeedback name="{{ 'contactos_comunicacion[' ~ comunicacionTipo.id ~ '][' ~ key ~ '][email]' }}" />
                        </div>
                    </div>
                {% endfor %}
                {% if not formulario.ver %}
                    <button type="button" class="btn btn-sm btn-outline-success float-end contacto-comunicacion-add mt-2" disabled>
                        Agregar otro contacto
                    </button>
                {% endif %}
            </div>
        </div>
    {% endfor %}
</div>

<template id="contactoComunicacionTemplate">
    <div class="row inputs-row">
        <div class="col-3">
            <twig:Form:Input class="contactos-comunicacion-nombres" label="Nombres" :required="true" />
        </div>
        <div class="col-3">
            <twig:Form:Input class="contactos-comunicacion-apellidos" label="Apellidos" :required="true" />
        </div>
        <div class="col-6">
            <twig:Formulario:Label :required="true">
                Correo electrónico
            </twig:Formulario:Label>
            <div class="input-email-borrar">
                <twig:Form:Input class="contactos-comunicacion-email" type="email" placeholder="{{ email_placeholder }}" :required="true" />
                <button class="btn btn-outline-danger contactos-comunicacion-delete" type="button">Eliminar</button>
            </div>
        </div>
    </div>
</template>