{% load i18n %}
<div class="phase-column bg-slate-50 rounded-2xl border border-slate-200 overflow-hidden flex flex-col"
     style="min-height: 400px;"
     id="phase-column-{{ phase_type }}-{{ phase_key }}">
    
    <!-- Header -->
    <div class="p-3 bg-white border-b border-slate-200">
        {% include "projects/partials/phase_header.html" with project=project phase_obj=phase_obj phase_key=phase_key phase_label=phase_label tasks_count=tasks_count can_edit=can_edit phase_type=phase_type %}
    </div>
    
    <!-- Task List -->
    <div class="flex-grow p-3 overflow-y-auto" style="max-height: 500px;">
        {% include "projects/partials/phase_task_list.html" with tasks=tasks project=project can_edit=can_edit today=today phase_type=phase_type phase_key=phase_key %}
    </div>
    
    <!-- Add Task Button -->
    {% if can_edit %}
    <div class="p-3 bg-white border-t border-slate-200">
        <button hx-get="{% url 'projects:htmx_task_create' project_pk=project.pk phase_type=phase_type phase=phase_key %}"
                hx-target="#taskModalContent"
                @click="openTaskModal('{% trans "Add Task" %}')"
                class="w-full py-2 border-2 border-dashed border-slate-300 rounded-xl text-sm font-semibold text-slate-500 hover:border-blue-400 hover:text-blue-600 hover:bg-blue-50 transition flex items-center justify-center gap-2">
            <i data-lucide="plus" class="w-4 h-4"></i>
            {% trans "Add Task" %}
        </button>
    </div>
    {% endif %}
</div>