<style>.dealflow-stages-widget{display:flex;flex-direction:column;overflow:hidden;min-width:0;flex:1 1 0;min-height:0;position:relative;}</style>
<div class="dealflow-stages-widget">
    {% if stages is not empty %}
        <div style="font-size:13px;flex:1 1 0;overflow-y:auto;min-height:0;">
            {% for stage in stages %}
                <div style="margin-bottom:6px;">
                    <div style="display:flex;justify-content:space-between;align-items:baseline;margin-bottom:2px;gap:6px;">
                        <a href="{{ path('mautic_dealflow_pipeline') }}" style="color:inherit;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;font-weight:600;">{{ stage.name|e }}</a>
                        <span style="flex-shrink:0;color:var(--text-secondary);font-size:11px;white-space:nowrap;">{{ stage.count }} deal{{ stage.count == 1 ? '' : 's' }} &middot; ${{ stage.totalAmount|number_format(0, '.', ',') }}</span>
                    </div>
                    <div style="background:var(--border-subtle-01, #eee);border-radius:2px;height:6px;">
                        <div style="background:var(--brand-primary, #4e79a7);border-radius:2px;height:6px;
                            width:{{ maxCount > 0 ? (stage.count / maxCount * 100) : 0 }}%;
                            min-width:{{ stage.count > 0 ? '6px' : '0' }};"></div>
                    </div>
                </div>
            {% endfor %}
        </div>
        <div style="flex-shrink:0;border-top:1px solid var(--border-subtle-01, #eee);margin-top:6px;padding-top:6px;font-size:12px;color:var(--text-secondary);display:flex;justify-content:space-between;align-items:center;">
            <a href="{{ path('mautic_dealflow_index') }}" style="color:inherit;text-decoration:none;">{{ totalDeals }} total &middot; ${{ stages|reduce((carry, s) => carry + s.totalAmount, 0)|number_format(0, '.', ',') }}</a>
        </div>
    {% else %}
        <p style="color:var(--text-secondary);font-size:13px;">No stage data available.</p>
    {% endif %}
    {% include '@DealFlow/Dashboard/_config_popover.html.twig' %}
</div>
