{#
    Buying committee / contacts table partial for deal view.
    Expected variables:
      - deal: Deal entity
      - dealContext: array with contacts, companyName, ownerName
      - canEditDeal: boolean
#}
<div class="dv-card" id="dvCardCommittee">
    <div class="dv-card-header" onclick="DealView.toggleCard('dvCardCommittee')">
        <h3>Buying Committee <span class="dv-count">({{ dealContext.contacts|length }})</span> <span class="dv-chevron"><svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z"/></svg></span></h3>
        {% if canEditDeal %}
            <div class="dv-card-header-actions">
                <button class="dv-btn dv-btn-sm" type="button" onclick="event.stopPropagation(); mQuery('#dealflowAssociateContact').modal('show');">+ Associate</button>
            </div>
        {% endif %}
    </div>
    <div class="dv-card-body" style="padding: 0;">
        {% if dealContext.contacts is empty %}
            <div style="padding: 12px 14px; color: var(--text-secondary);">No contacts associated yet.</div>
        {% else %}
            <table class="dv-committee-table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Role</th>
                        <th>Email</th>
                        <th>Added</th>
                        {% if canEditDeal %}<th style="width:30px;"></th>{% endif %}
                    </tr>
                </thead>
                <tbody>
                    {% for contact in dealContext.contacts %}
                        <tr style="cursor:pointer;" onclick="window.location.href='{{ path('mautic_contact_action', {'objectAction': 'view', 'objectId': contact.id}) }}'">
                            <td class="dv-contact-name">
                                <a href="{{ path('mautic_contact_action', {'objectAction': 'view', 'objectId': contact.id}) }}" data-toggle="ajax" onclick="event.stopPropagation();">{{ contact.name }}</a>
                            </td>
                            <td>
                                {% if contact.label %}
                                    {% set roleBadgeMap = {'Decision Maker': 'dv-badge-red', 'Champion': 'dv-badge-blue', 'Technical Evaluator': 'dv-badge-yellow', 'Influencer': 'dv-badge-green', 'Budget Holder': 'dv-badge-red', 'End User': 'dv-badge-blue'} %}
                                    <span class="dv-badge {{ roleBadgeMap[contact.label] ?? 'dv-badge-gray' }}">{{ contact.label }}</span>
                                {% else %}
                                    <span style="color:var(--text-secondary);">&mdash;</span>
                                {% endif %}
                            </td>
                            <td class="dv-contact-email">{{ contact.email ?: '&mdash;' }}</td>
                            <td class="dv-contact-date">{{ contact.createdAt|date('M j, Y') }}</td>
                            {% if canEditDeal %}
                                <td style="width:30px; text-align:center;">
                                    <button type="button" class="btn btn-xs btn-link" style="color:var(--text-secondary);padding:0;"
                                            onclick="event.stopPropagation(); DealView.confirmDetachContact({{ contact.id }}, '{{ contact.name|default('this contact')|e('js') }}');"
                                            title="Remove from deal">
                                        <i class="fa fa-times"></i>
                                    </button>
                                </td>
                            {% endif %}
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        {% endif %}
    </div>
</div>
