{% set displayed_contacts = compact|default(false) ? contacts|slice(0, 4) : contacts %}
<div class="clientsphere-profile-table-wrap">
    <table class="clientsphere-profile-table">
        <thead>
            <tr>
                <th>Nom</th>
                <th>Fonction</th>
                <th>Email</th>
                <th>Téléphone</th>
                <th>Rôle</th>
                <th>Statut</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
        {% for contact in displayed_contacts %}
            {% set contact_image = contact.image|default('') %}
            {% set is_principal = profile.principalContact and profile.principalContact.id == contact.id %}
            <tr>
                <td>
                    <span class="clientsphere-profile-contact-name">
                        <span class="clientsphere-contact-avatar">
                            {% if contact_image %}<img src="{{ contact_image starts with 'http' or contact_image starts with '/' ? contact_image : asset(contact_image) }}" alt="{{ contact.prenom }} {{ contact.nom }}">{% else %}{{ contact.prenom|first }}{{ contact.nom|first }}{% endif %}
                        </span>
                        <strong>{{ contact.prenom }} {{ contact.nom }}</strong>
                    </span>
                </td>
                <td>{{ contact.fonction ?: '—' }}</td>
                <td>{% if contact.email %}<a href="mailto:{{ contact.email }}">{{ contact.email }}</a>{% else %}—{% endif %}</td>
                <td>{{ profile.contactPhones[contact.id] ?: '—' }}</td>
                <td><span class="clientsphere-contact-role {{ is_principal ? 'is-principal' : '' }}">{{ is_principal ? 'Principal' : 'Secondaire' }}</span></td>
                <td><span class="clientsphere-contact-status {{ contact.statut ? 'is-active' : 'is-inactive' }}"><i></i>{{ contact.statut ? 'Actif' : 'Inactif' }}</span></td>
                <td>
                    <div class="d-flex gap-2">
                        <a href="{{ path('commercial_contact_edit', {clientId: client.id, id: contact.id}) }}" class="link"><i class="ti ti-eye fs-5"></i></a>
                        <a href="{{ path('commercial_contact_edit', {clientId: client.id, id: contact.id}) }}" class="link"><i class="ti ti-edit fs-5"></i></a>
                    </div>
                </td>
            </tr>
        {% else %}
            <tr><td colspan="7"><div class="clientsphere-profile-empty"><i class="ti ti-users-off"></i><p>Aucun contact actif.</p><a href="{{ path('commercial_contact_new', {clientId: client.id}) }}" data-turbo-frame="frame_modal">Ajouter un contact</a></div></td></tr>
        {% endfor %}
        </tbody>
    </table>
</div>