<style>.dealflow-leaderboard-widget{display:flex;flex-direction:column;overflow:hidden;min-width:0;flex:1 1 0;min-height:0;position:relative;}</style>
<div class="dealflow-leaderboard-widget">
    {% if leaders is not empty %}
        <div style="flex:1 1 0;overflow-y:auto;min-height:0;">
            <table style="width:100%;font-size:13px;table-layout:fixed;">
                <thead>
                <tr style="color:var(--text-secondary);font-size:11px;text-transform:uppercase;">
                    <th style="padding:6px 0;width:24px;">#</th>
                    <th style="padding:6px 0;">Owner</th>
                    <th style="padding:6px 0;text-align:center;width:50px;">Deals</th>
                    <th style="padding:6px 0;text-align:right;width:90px;">Total Value</th>
                </tr>
                </thead>
                <tbody>
                {% for leader in leaders %}
                    <tr>
                        <td style="padding:6px 0;color:var(--text-secondary);font-size:12px;">{{ loop.index }}</td>
                        <td style="padding:6px 0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:0;"><a href="{{ path('mautic_dealflow_index') }}" style="color:inherit;text-decoration:none;">{{ leader.ownerName|e }}</a></td>
                        <td style="padding:6px 0;text-align:center;">{{ leader.dealsCount }}</td>
                        <td style="padding:6px 0;text-align:right;">${{ leader.totalAmount|number_format(0, '.', ',') }}</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
        <div style="flex-shrink:0;border-top:1px solid var(--border-subtle-01, #eee);margin-top:6px;padding-top:6px;text-align:right;">
            <a href="{{ path('mautic_dealflow_index') }}" style="font-size:12px;color:var(--brand-primary, #4e79a7);text-decoration:none;">View all &rarr;</a>
        </div>
    {% else %}
        <p style="color:var(--text-secondary);font-size:13px;">No deal data available.</p>
    {% endif %}
    {% include '@DealFlow/Dashboard/_config_popover.html.twig' %}
</div>
