{% load static %}

<div class="list-group-item department-node"
     data-department-id="{{ department.department_id }}"
     style="padding-left: {{ level|add:1 }}rem;">

    <div class="d-flex align-items-center">
        <!-- Toggle Icon -->
        <div class="me-2" style="width: 20px;">
            {% if department.sub_departments.exists %}
                <i class="fa fa-chevron-right toggle-icon text-muted"
                   hx-get="{% url 'hr:department_children' department.department_id %}?level={{ level }}"
                   hx-target="#children-{{ department.department_id }}"
                   hx-swap="innerHTML"
                   hx-trigger="click once"
                   role="button"
                   aria-label="Expand department"></i>
            {% endif %}
        </div>

        <!-- Department Icon -->
        <div class="me-2">
            <i class="fa
                {% if department.department_type == 'CLINICAL' %}fa-stethoscope text-danger fa-2x
                {% elif department.department_type == 'ADMINISTRATIVE' %}fa-users-cog text-primary fa-2x
                {% elif department.department_type == 'SUPPORT' %}fa-tools text-warning fa-2x
                {% elif department.department_type == 'ANCILLARY' %}fa-microscope text-info fa-2x
                {% elif department.department_type == 'EXECUTIVE' %}fa-crown text-success fa-2x
                {% else %}fa-building text-secondary
                {% endif %}"></i>
        </div>

        <!-- Department Info -->
        <div class="flex-grow-1">
            <div class="d-flex align-items-center">
                <a href="{% url 'hr:department_detail' pk=department.pk %}" class="text-decoration-none fw-medium">
                    {{ department.name }}
                </a>

                {% if not department.is_active %}
                    <span class="badge bg-secondary ms-2">Inactive</span>
                {% endif %}

                {% if department.department_head %}
                    <span class="badge bg-info ms-1"
                          data-bs-toggle="tooltip"
                          title="Department Head: {{ department.department_head.user.get_full_name }}">
                        <i class="fa fa-user-tie"></i>
                    </span>
                {% endif %}
            </div>

            <small class="text-muted">
                {{ department.get_department_type_display }}
                • {{ department.employee_count }} employee{{ department.employee_count|pluralize }}
                {% if department.cost_center %}
                    • Cost Center: {{ department.cost_center }}
                {% endif %}
            </small>

            <!-- Staffing Progress Bar (if authorized positions set) -->
            {% if department.authorized_positions > 0 %}
                <div class="mt-1">
                    <div class="progress" style="height: 4px;">
                        {% with staffing_percentage=department.staffing_percentage %}
                        <div class="progress-bar
                            {% if staffing_percentage >= 90 %}bg-success
                            {% elif staffing_percentage >= 70 %}bg-warning
                            {% else %}bg-danger
                            {% endif %}"
                             role="progressbar"
                             style="width: {{ staffing_percentage|floatformat:0 }}%"
                             aria-valuenow="{{ staffing_percentage|floatformat:0 }}"
                             aria-valuemin="0"
                             aria-valuemax="100"
                             data-bs-toggle="tooltip"
                             title="{{ department.employee_count }}/{{ department.authorized_positions }} positions filled">
                        </div>
                        {% endwith %}
                    </div>
                </div>
            {% endif %}
        </div>

        <!-- Action Buttons -->
        <div class="btn-group btn-group-sm ms-2">
            <a href="{% url 'hr:department_detail' pk=department.pk %}"
               class="btn btn-sm btn-outline-primary"
               data-bs-toggle="tooltip"
               title="View Details">
                <i class="fa fa-eye"></i>
            </a>
            <a href="{% url 'hr:department_update' pk=department.pk %}"
               class="btn btn-sm btn-outline-warning"
               data-bs-toggle="tooltip"
               title="Edit">
                <i class="fa fa-edit"></i>
            </a>

            <!-- Dropdown for more actions -->
            <div class="btn-group btn-group-sm">
                <button type="button"
                        class="btn btn-white dropdown-toggle"
                        data-bs-toggle="dropdown"
                        aria-expanded="false">
                    <i class="fa fa-ellipsis-v"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                    <li>
                        <a class="dropdown-item" href="{% url 'hr:assign_department_head' pk=department.pk %}">
                            <i class="fa fa-user-tie fa-fw me-2"></i>Assign Head
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="{% url 'hr:employee_list' %}?department={{ department.pk }}">
                            <i class="fa fa-users fa-fw me-2"></i>View Employees
                        </a>
                    </li>
                    <li><hr class="dropdown-divider"></li>
                    <li>
                        <a class="dropdown-item" href="{% url 'hr:department_create' %}?parent={{ department.pk }}">
                            <i class="fa fa-plus fa-fw me-2"></i>Add Sub-Department
                        </a>
                    </li>
                    <li><hr class="dropdown-divider"></li>
                    {% if department.is_active %}
                        <li>
                            <a class="dropdown-item text-warning"
                               href="{% url 'hr:deactivate_department' pk=department.pk %}"
                               onclick="return confirm('Deactivate this department?')">
                                <i class="fa fa-pause fa-fw me-2"></i>Deactivate
                            </a>
                        </li>
                    {% else %}
                        <li>
                            <a class="dropdown-item text-success"
                               href="{% url 'hr:activate_department' pk=department.pk %}">
                                <i class="fa fa-play fa-fw me-2"></i>Activate
                            </a>
                        </li>
                    {% endif %}
                    {% if department.employee_count == 0 and not department.sub_departments.exists %}
                        <li><hr class="dropdown-divider"></li>
                        <li>
                            <a class="dropdown-item text-danger"
                               href="{% url 'hr:department_delete' pk=department.pk %}"
                               onclick="return confirm('Delete this department permanently?')">
                                <i class="fa fa-trash fa-fw me-2"></i>Delete
                            </a>
                        </li>
                    {% endif %}
                </ul>
            </div>
        </div>
    </div>

    <!-- Children Container (loaded via HTMX) -->
    {% if department.sub_departments.exists %}
        <div id="children-{{ department.department_id }}" class="department-children mt-2"></div>
    {% endif %}
</div>