{% load i18n %}

<div class="hierarchy-node">
    <div class="hierarchy-card {{ node.is_search_result|yesno:'search-result,' }}" onclick="window.location.href='{% url 'organizations:staff_detail' node.staff.id %}'">
        <div class="flex items-center gap-3">
            <div class="staff-avatar flex-shrink-0">
                {% if node.staff.photo %}
                <img src="{{ node.staff.photo.url }}" alt="{{ node.staff.get_full_name }}" class="w-12 h-12 object-cover rounded-full">
                {% else %}
                <div class="w-12 h-12 rounded-full bg-gradient-to-br from-navy to-blue flex items-center justify-center text-white font-semibold text-sm">
                    {{ node.staff.first_name|first }}{{ node.staff.last_name|first }}
                </div>
                {% endif %}
            </div>
            <div class="staff-info flex-grow-1 min-w-0">
                <h6 class="text-sm font-semibold text-slate-800 mb-1 truncate">
                    {{ node.staff.get_full_name }}
                    {% if node.staff.report_to %}
                    <span class="inline-flex items-center gap-1.5 ml-2 px-2 py-0.5 bg-slate-100 text-slate-600 rounded-full text-xs font-medium">
                        <i data-lucide="arrow-up" class="w-3 h-3"></i>
                        <span class="hidden sm:inline">{% trans "Reports to:" %} {{ node.staff.report_to.get_full_name }}</span>
                    </span>
                    {% endif %}
                </h6>
                <div class="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-slate-500">
                    <span class="inline-flex items-center gap-1.5">
                        <i data-lucide="badge" class="w-3.5 h-3.5"></i>
                        {{ node.staff.employee_id }}
                    </span>
                    {% if node.staff.job_title %}
                    <span class="inline-flex items-center gap-1.5">
                        <i data-lucide="briefcase" class="w-3.5 h-3.5"></i>
                        {{ node.staff.job_title }}
                    </span>
                    {% endif %}
                </div>
                <div class="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-slate-500 mt-1">
                    {% if node.staff.hospital %}
                    <span class="inline-flex items-center gap-1.5">
                        <i data-lucide="hospital" class="w-3.5 h-3.5"></i>
                        {{ node.staff.hospital.name }}
                    </span>
                    {% endif %}
                    {% if node.staff.department %}
                    <span class="inline-flex items-center gap-1.5">
                        <i data-lucide="building" class="w-3.5 h-3.5"></i>
                        {{ node.staff.department.name }}
                    </span>
                    {% endif %}
                </div>
                <div class="flex items-center gap-2 mt-2">
                    {% if node.has_children %}
                    <span class="inline-flex items-center gap-1.5 px-2.5 py-1 bg-navy text-white rounded-full text-xs font-semibold">
                        <i data-lucide="users" class="w-3.5 h-3.5"></i>
                        {{ node.direct_reports|length }} {% trans "Direct Report" %}{{ node.direct_reports|length|pluralize }}
                    </span>
                    {% endif %}
                    {% if node.staff.status == 'active' %}
                    <span class="inline-flex items-center gap-1.5 px-2.5 py-1 bg-green-100 text-green-700 rounded-full text-xs font-semibold">
                        <i data-lucide="check-circle" class="w-3.5 h-3.5"></i>
                        {% trans "Active" %}
                    </span>
                    {% else %}
                    <span class="inline-flex items-center gap-1.5 px-2.5 py-1 bg-slate-100 text-slate-600 rounded-full text-xs font-semibold">
                        <i data-lucide="x-circle" class="w-3.5 h-3.5"></i>
                        {% trans "Inactive" %}
                    </span>
                    {% endif %}
                </div>
            </div>
            {% if node.has_children %}
            <div class="flex-shrink-0">
                <button class="p-2 hover:bg-slate-100 rounded-lg transition-colors" onclick="event.stopPropagation(); toggleNode('{{ node.staff.id }}')">
                    <i data-lucide="chevron-right" class="w-5 h-5 text-slate-400 expand-icon"></i>
                </button>
            </div>
            {% endif %}
        </div>
    </div>

    {% if node.has_children %}
    <div class="children-container" id="children-{{ node.staff.id }}">
        {% for child in node.direct_reports %}
            {% include 'organizations/hierarchy_node.html' with node=child %}
        {% endfor %}
    </div>
    {% endif %}
</div>
