<div class="dealflow-dashboard-widget" style="display:flex;flex-direction:column;overflow:hidden;min-width:0;position:relative;flex:1 1 0;min-height:0;">
    <div style="text-align:right;margin-bottom:12px;">
        <span style="font-size:12px;color:var(--text-secondary);">{{ monthLabel|e }} &mdash; {{ deals|length }} deal{{ deals|length == 1 ? '' : 's' }}</span>
    </div>
    {% if deals is not empty %}
        <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:35%;">Deal</th>
                <th style="padding:6px 0;width:22%;">Stage</th>
                <th style="padding:6px 0;text-align:right;width:20%;">Amount</th>
                <th style="padding:6px 0;text-align:right;width:23%;">Close Date</th>
            </tr>
            </thead>
            <tbody>
            {% for deal in deals[:10] %}
                <tr>
                    <td style="padding:6px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:0;"><a href="{{ path('mautic_dealflow_view', {'objectId': deal.getId()}) }}" style="color:inherit;text-decoration:none;font-weight:600;">{{ deal.getTitle()|e }}</a></td>
                    <td style="padding:6px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:0;">{{ deal.getStage() ? deal.getStage().getName()|e : 'N/A' }}</td>
                    <td style="padding:6px 0;text-align:right;">${{ deal.getAmount()|number_format(0, '.', ',') }}</td>
                    <td style="padding:6px 0;text-align:right;white-space:nowrap;">
                        {{ deal.getExpectedCloseDate() ? deal.getExpectedCloseDate()|date('Y-m-d') : '—' }}
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
        <div style="border-top:1px solid var(--border-subtle-01, #eee);margin-top:8px;padding-top:8px;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 deals expected to close this month.</p>
    {% endif %}
    {% include '@DealFlow/Dashboard/_config_popover.html.twig' %}
</div>
