{% set payeur = payeur_tiers is defined ? payeur_tiers : null %}
<div class="px-2 py-2 bg-white color-primary w-100 h-100 block-infos-container position-relative" style="height: 227px !important">
    {% if not payeur %}
        <div class="d-flex w-100 h-100 justify-content-center align-items-center">
            <div class="text-center">Aucun payeur tiers pour cette intervention</div>
        </div>
    {% else %}
        <div class="d-flex flex-column w-100" style="gap:0.5rem;">
            {# Ligne 1 : N°Client, Type, Civilité #}
            <div class="d-flex w-100">
                <div class="d-flex align-items-center" style="margin-right: 1.2rem;">
                    <label class="me-1">N°Client: </label>
                    <span class="color-vert-link fw-600" style="font-size:15px">{{ payeur.getFormattedNumeroClient }}</span>
                </div>
                <div class="d-flex align-items-center">
                    <label style="width:36px;">Type</label>
                    <input type="text" style="width:120px;" disabled class="form-control bg-grey" value="{{ payeur.typeClient ? payeur.typeClient.libelle : '' }}">
                </div>
                <div class="d-flex align-items-center ms-auto">
                    <label class="me-1 px-1" style="width:58px;">Civilité</label>
                    <input type="text" disabled class="form-control bg-grey" style="width:120px;" value="{{ payeur.etatCivil ? payeur.etatCivil.libelleCourt : '' }}">
                </div>
            </div>
            
            {# Ligne 2 : Nom, Catégorie #}
            <div class="d-flex w-100">
                <div class="d-flex align-items-center">
                    <label class="me-1" style="width:51px;">Nom</label>
                    <input type="text" disabled class="form-control bg-grey" value="{{ payeur.nom }}" style="width:170px;">
                </div>
                <div class="d-flex align-items-center ms-auto">
                    <label style="margin-right:2.8rem">Catégorie</label>
                    <input type="text" disabled class="form-control bg-grey" value="{{ payeur.CategoriePro ? payeur.CategoriePro.libelle : '' }}" style="width:173px;">
                </div>
            </div>
            
            {# Ligne 3 : Prénom, Nom Entreprise #}
            <div class="d-flex w-100">
                <div class="d-flex w-100">
                    <div class="d-flex align-items-center">
                        <label class="me-1" style="width: 51px;">Prénom</label>
                        <input type="text" disabled class="form-control bg-grey" value="{{ payeur.prenom }}" style="width:170px;">
                    </div>
                    <div class="d-flex align-items-center ms-auto">
                        <label style="margin-right: 0.68rem; width:92px">Nom Entreprise</label>
                        <input type="text" disabled class="form-control bg-grey" value="{{ payeur.nomEntreprise }}" style="width:173px;">
                    </div>
                </div>
            </div>
            
            {# Ligne 4 : Adresse #}
            <div class="d-flex w-100 align-items-center">
                <i class="fa fa-lg fa-2x fa-home align-self-center" style="margin-left: -0.2rem; margin-right: 1.2rem; font-size:2.6em"></i>
                <input type="text" disabled class="form-control bg-grey" value="{{ payeur.adresse ? payeur.adresse : '' }}" style="flex:1;">
            </div>
            
            {# Ligne 5 : Téléphones #}
            <div class="d-flex w-100 align-items-center" style="position:relative">
                <span class="icon-phone-rotary" style="position: absolute;">{{ source('@public_path'~asset('build/images/phone-rotary.svg')) }}</span>
                <ul class="collection d-flex w-100 flex-wrap justify-content-between" style="margin-bottom: 0rem;margin-left:22px;gap:0.6rem;">
                    {% for i in 1..3 %}
                        <li style="position:relative;">
                            {% set clientTel = payeur.clientTels.get(i-1) %}
                            {% if clientTel %}
                                {% set fr = clientTel.fr is defined ? clientTel.fr : 1 %}
                                {% set popup_id = 'popup-client-commentaireTel-' ~ payeur.id ~ '-' ~ i %}
                                <input type="text" disabled class="form-control bg-grey input_tel" value="{{ clientTel.numTel }}" style="width:150px">
                                <div class="me-2 telephone-fr {{ fr ? '' : 'opacity-25' }}" style="width:16px;position: absolute;right: 18px;bottom: 5px;">
                                    {{ source('@public_path'~asset('build/images/fr.svg')) }}
                                </div>
                                {% if clientTel.commentaireTel %}
                                    <a>
                                        <i class="fa collection-info has-info fa-info-circle"></i>
                                    </a>
                                    <div class="info-tooltip">{{ clientTel.commentaireTel }}</div>
                                {% endif %}
                            {% else %}
                                <input type="text" disabled class="form-control bg-grey" value="" style="width:150px">
                            {% endif %}
                        </li>
                    {% endfor %}
                </ul>
            </div>
            
            {# Ligne 6 : Emails #}
            <div class="d-flex w-100 " style="margin-top: -0.5rem;">
                <div class="d-flex w-100" style="position:relative;">
                    <div><i class="fa fa-envelope align-self-center" style="font-size: 2.4em; width: 28px; margin-left: 1px;"></i></div>
                    <ul class="collection w-100" style="margin-bottom: 0rem;width:304px;margin-left:0;padding-left:1rem">
                        <li class="mb-0 position-relative" style="width:311px">
                            {% set clientEmail = payeur.ClientEmails.get(0) %}
                            {% if clientEmail %}
                                {% set popup_id = 'popup-client-commentaireEmail-' ~ payeur.id %}
                                <input type="email" disabled class="form-control bg-grey" value="{{ clientEmail.email }}" style="width:311px">
                                {% if clientEmail.commentaireEmail %}
                                    <a>
                                        <i class="fa collection-info has-info fa-info-circle"></i>
                                    </a>
                                    <div class="info-tooltip">{{ clientEmail.commentaireEmail }}</div>
                                {% endif %}
                            {% else %}
                                <input type="email" disabled class="form-control bg-grey" value="" style="width:311px">
                            {% endif %}
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        {# Pictos en bas à droite #}
        <div class="position-absolute" style="bottom: 8px; right: 8px; display: flex; flex-direction: column; gap: 0.3rem; align-items: flex-end;">
            {% if payeur.typeClient and payeur.typeClient.id == 2 %}
                <a data-popup-position-of="center" data-popup-position-at="top" data-poppup-container="body" data-popup-id="popup-impot-{{ payeur.id }}" data-dxpopup="" data-popup-offset="0 275" data-popup-title="Identification fiscale" data-popup-width="auto">
                    <div class="d-flex align align-self-end bg-white justify-content-center align-items-center border-grey-field" style="width: 28px;height: 28px;border-radius:4px">
                        <img class="bg-white" src="{{ asset('build/images/picto-impot.png') }}" style="vertical-align: baseline;border-radius: 4px; margin-top: 0.18rem;width:22px;height:19px;">
                    </div>
                </a>
            {% endif %}
            {% if payeur.getClientTutelle %}
                <a data-popup-position-of="center" data-popup-position-at="top" data-poppup-container="body" data-popup-id="popup-tuteur-{{ payeur.getClientTutelle.id }}" data-dxpopup="" data-popup-offset="0 275" data-popup-title="Tuteur" data-popup-width="auto" style="width:28px;height:28px;">
                    <div class="d-flex align align-self-end bg-white justify-content-center align-items-center" style="border-radius:4px">
                        <img class="bg-white" src="{{ asset('build/images/picto-tutelle.png') }}" width="28" height="28" style="vertical-align: baseline;border-radius: 4px;">
                    </div>
                </a>
            {% endif %}
        </div>
    {% endif %}
</div>