{% 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="d-flex align-items-center">
            <div class="staff-avatar flex-shrink-0 me-3">
                {% if node.staff.photo %}
                <img src="{{ node.staff.photo.url }}" alt="{{ node.staff.get_full_name }}" class="w-100 h-100 object-fit-cover rounded-circle">
                {% else %}
                {{ node.staff.first_name|first }}{{ node.staff.last_name|first }}
                {% endif %}
            </div>
            <div class="staff-info flex-grow-1">
                <h6 class="mb-1">
                    {{ node.staff.get_full_name }}
                    {% if node.staff.report_to %}
                    <span class="badge bg-light text-muted ms-2">
                        <i class="fas fa-arrow-up"></i> Reports to: {{ node.staff.report_to.get_full_name }}
                    </span>
                    {% endif %}
                </h6>
                <small class="d-block text-muted">
                    <i class="fas fa-id-badge me-1"></i> {{ node.staff.employee_id }}
                    {% if node.staff.job_title %}
                    | <i class="fas fa-briefcase me-1"></i> {{ node.staff.job_title }}
                    {% endif %}
                </small>
                <small class="d-block text-muted">
                    {% if node.staff.hospital %}
                    <i class="fas fa-hospital me-1"></i> {{ node.staff.hospital.name }}
                    {% endif %}
                    {% if node.staff.department %}
                    | <i class="fas fa-building me-1"></i> {{ node.staff.department.name }}
                    {% endif %}
                </small>
                {% if node.has_children %}
                <span class="badge bg-primary direct-reports-badge mt-1">
                    <i class="fas fa-users me-1"></i> {{ node.direct_reports|length }} {% trans "Direct Report" %}{{ node.direct_reports|length|pluralize }}
                </span>
                {% endif %}
                {% if node.staff.status == 'active' %}
                <span class="badge bg-success ms-1">{% trans "Active" %}</span>
                {% else %}
                <span class="badge bg-secondary ms-1">{% trans "Inactive" %}</span>
                {% endif %}
            </div>
            {% if node.has_children %}
            <div class="flex-shrink-0">
                <i class="fas fa-chevron-right expand-icon" id="expand-{{ node.staff.id }}" onclick="event.stopPropagation(); toggleNode('{{ node.staff.id }}')"></i>
            </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>