<style>.dealflow-tasks-widget{display:flex;flex-direction:column;overflow:hidden;min-width:0;flex:1 1 0;min-height:0;}</style>
<div class="dealflow-tasks-widget">
    {% if tasks is not empty %}
        <ul style="list-style:none;margin:0;padding:0;flex:1 1 0;overflow-y:auto;min-height:0;">
            {% for task in tasks %}
                <li style="padding:6px 0;border-top:1px solid var(--border-subtle-01, #eee);font-size:13px;">
                    <div style="display:flex;justify-content:space-between;align-items:center;gap:8px;">
                        <a href="{{ path('mautic_dealflow_view', {'objectId': task.getDeal().getId()}) }}" style="color:inherit;text-decoration:none;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;">{{ task.getTitle() }}</a>
                        <span style="flex-shrink:0;font-size:11px;text-transform:uppercase;font-weight:700;
                            {% if task.getPriority() == 'urgent' %}color:var(--label-color-red, #bc4f4f);
                            {% elseif task.getPriority() == 'high' %}color:#d4a017;
                            {% else %}color:var(--text-secondary);{% endif %}">
                            {{ task.getPriority() }}
                        </span>
                    </div>
                    {% if task.getDueAt() %}
                        <div style="font-size:12px;color:var(--text-secondary);margin-top:2px;">
                            Due {{ task.getDueAt()|date('Y-m-d') }}
                        </div>
                    {% endif %}
                </li>
            {% endfor %}
        </ul>
        <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_task_queue') }}" style="font-size:12px;color:var(--brand-primary, #4e79a7);text-decoration:none;">View all tasks &rarr;</a>
        </div>
    {% else %}
        <p style="color:var(--text-secondary);font-size:13px;">No open tasks.</p>
    {% endif %}
</div>
