<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);">No activity in {{ staleDays }}+ days</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;width:23%;">Last Updated</th>
                <th style="padding:6px 0;text-align:right;width:20%;">Days Stale</th>
            </tr>
            </thead>
            <tbody>
            {% for deal in deals %}
                {% set daysStale = date().diff(deal.getDateModified()).days %}
                <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;color:var(--text-secondary);">
                        {{ deal.getDateModified() ? deal.getDateModified()|date('Y-m-d') : '—' }}
                    </td>
                    <td style="padding:6px 0;text-align:right;font-weight:600;
                        {% if daysStale > 30 %}color:var(--label-color-red, #bc4f4f);{% else %}color:var(--text-secondary);{% endif %}">
                        {{ daysStale }}
                    </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 stale deals &rarr;</a>
        </div>
    {% else %}
        <p style="color:var(--text-secondary);font-size:13px;">No stale deals — all deals have recent activity.</p>
    {% endif %}
    {% include '@DealFlow/Dashboard/_config_popover.html.twig' %}
</div>
