{% load i18n %}
<div class="phase-header mb-3">
    <div class="flex items-center justify-between mb-2">
        <div class="flex items-center gap-2">
            <div class="w-8 h-8 rounded-lg flex items-center justify-center text-sm
                {% if phase_obj %}
                    {% if phase_obj.status == 'completed' %}bg-green-100 text-green-700
                    {% elif phase_obj.status == 'active' %}bg-blue-100 text-blue-700
                    {% else %}bg-slate-100 text-slate-600{% endif %}
                {% else %}bg-slate-100 text-slate-400{% endif %}">
                {% if phase_key == 'plan' %}<i data-lucide="lightbulb" class="w-4 h-4"></i>
                {% elif phase_key == 'do' %}<i data-lucide="play" class="w-4 h-4"></i>
                {% elif phase_key == 'check' %}<i data-lucide="search" class="w-4 h-4"></i>
                {% elif phase_key == 'act' %}<i data-lucide="rocket" class="w-4 h-4"></i>
                {% elif phase_key == 'find' %}<i data-lucide="search" class="w-4 h-4"></i>
                {% elif phase_key == 'organize' %}<i data-lucide="folder" class="w-4 h-4"></i>
                {% elif phase_key == 'clarify' %}<i data-lucide="eye" class="w-4 h-4"></i>
                {% elif phase_key == 'understand' %}<i data-lucide="brain" class="w-4 h-4"></i>
                {% elif phase_key == 'select' %}<i data-lucide="check-circle" class="w-4 h-4"></i>
                {% endif %}
            </div>
            <div>
                <h3 class="font-bold text-sm text-navy">{{ phase_label }}</h3>
                {% if phase_obj and phase_obj.owner %}
                <p class="text-[10px] text-slate-500">{{ phase_obj.owner.get_full_name }}</p>
                {% endif %}
            </div>
        </div>
        {% if can_edit and phase_obj %}
        <button hx-get="{% url 'projects:htmx_phase_edit_form' project_pk=project.pk phase_type=phase_type phase=phase_key %}"
                hx-target="#phaseModalContent"
                @click="openPhaseModal('{{ phase_label }}')"
                class="p-1.5 text-slate-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition"
                title="{% trans 'Edit Phase' %}">
            <i data-lucide="pencil" class="w-3.5 h-3.5"></i>
        </button>
        {% endif %}
    </div>
    
    {% if phase_obj %}
    <div class="flex items-center justify-between">
        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold uppercase
            {% if phase_obj.status == 'completed' %}bg-green-100 text-green-700
            {% elif phase_obj.status == 'active' %}bg-blue-100 text-blue-700
            {% elif phase_obj.status == 'pending' %}bg-yellow-100 text-yellow-700
            {% else %}bg-slate-100 text-slate-600{% endif %}">
            {{ phase_obj.get_status_display }}
        </span>
        <span class="text-[10px] text-slate-500 font-medium">
            {{ tasks_count }} {% trans "tasks" %}
        </span>
    </div>
    {% else %}
    <div class="text-center py-2">
        <span class="text-[10px] text-slate-400">{% trans "Not set up" %}</span>
    </div>
    {% endif %}
</div>