{% load i18n %}
{% load hospital_filters %}
{% load static %}

<style>
    .sidebar-icon-only {
        width: 5rem;
        transition: width 0.3s ease;
    }
    .sidebar-icon-only:hover {
        width: 16rem;
    }
    .sidebar-icon-only .sidebar-text {
        opacity: 0;
        visibility: hidden;
        width: 0;
        overflow: hidden;
        transition: opacity 0.2s ease;
        white-space: nowrap;
    }
    .sidebar-icon-only:hover .sidebar-text {
        opacity: 1;
        visibility: visible;
        width: auto;
    }
    .sidebar-icon-only .sidebar-logo-text {
        opacity: 0;
        width: 0;
        overflow: hidden;
        transition: opacity 0.2s ease;
    }
    .sidebar-icon-only:hover .sidebar-logo-text {
        opacity: 1;
        width: auto;
    }
    .sidebar-icon-only .sidebar-logo-extended {
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    .sidebar-icon-only:hover .sidebar-logo-extended {
        opacity: 1;
    }
    .sidebar-icon-only:hover .sidebar-logo-collapsed {
        display: none;
    }
    .sidebar-icon-only .submenu {
        display: none;
    }
    .sidebar-icon-only:hover .submenu {
        display: block;
    }
    .sidebar-expanded {
        width: 16rem !important;
    }
    .sidebar-expanded .sidebar-text {
        opacity: 1 !important;
        visibility: visible !important;
        width: auto !important;
    }
    .sidebar-expanded .sidebar-logo-text {
        opacity: 1 !important;
        width: auto !important;
    }
    .sidebar-expanded .sidebar-logo-extended {
        opacity: 1 !important;
    }
    .sidebar-expanded .sidebar-logo-collapsed {
        display: none !important;
    }
    .sidebar-expanded .submenu {
        display: block !important;
    }
    @media (max-width: 1024px) {
        .sidebar-expanded {
            width: 16rem !important;
        }
    }
    .nav-item-active {
        background-color: rgba(255,255,255,0.1);
        border-left: 3px solid #fff;
    }
    .nav-item-sublink-active {
        background-color: rgba(255,255,255,0.15);
    }
    .submenu {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }
    .submenu.open {
        max-height: 500px;
    }
    .submenu a {
        padding-left: 3.5rem;
        font-size: 0.75rem;
    }
    [dir="rtl"] .submenu a {
        padding-left: 0.5rem;
        padding-right: 3.5rem;
    }
    [dir="rtl"] .nav-item-active {
        border-left: none;
        border-right: 3px solid #fff;
    }
    [dir="rtl"] #sidebar button span.sidebar-text.flex-1,
    [dir="rtl"] #sidebar .sidebar-text.text-left {
        text-align: right;
    }
</style>

<aside id="sidebar" class="sidebar-icon-only bg-navy text-white flex flex-col shadow-2xl z-20 fixed left-0 top-0 h-screen overflow-y-auto overflow-x-hidden">
    {% csrf_token %}
    <script>window.sidebarCsrfToken = document.querySelector('[name=csrfmiddlewaretoken]')?.value;</script>
    <!-- Brand -->
    <div class="p-4 flex items-center gap-3 border-b border-white/10">
        <!-- Collapsed logo (icon only) -->
        <div class="sidebar-logo-collapsed w-10 h-10 flex-shrink-0">
            <img src="{% static 'img/HH_R_ICON.png' %}" alt="Al Hammadi" class="w-full h-full object-contain">
        </div>
        <!-- Extended logo (full logo with text) - shown on hover -->
        <div class="sidebar-logo-extended flex-shrink-0">
            <img src="{% static 'img/HH_R_H_Logo.png' %}" alt="Al Hammadi" class="h-10 w-auto object-contain">
        </div>
    </div>
    
    <!-- Navigation -->
    <nav class="flex-1 px-2 py-4 space-y-1">
        <!-- Dashboard -->
        {% if user.is_px_admin or user.is_hospital_admin or user.is_px_management or user.is_px_employee or user.is_executive or user.is_director %}
        <a href="{% url 'analytics:dashboard' %}" 
           class="flex items-center gap-3 p-3 rounded-lg transition {% if request.resolver_match.url_name == 'dashboard' and 'analytics' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
            <i data-lucide="layout-dashboard" class="w-5 h-5 flex-shrink-0"></i>
            <span class="sidebar-text text-sm font-semibold whitespace-nowrap">{% trans "Dashboard" %}</span>
        </a>
        {% endif %}

        <!-- Department Champion: only Dashboard + My Department -->
        {% if user.is_champion and not user.is_px_admin and not user.is_hospital_admin and not user.is_department_manager %}
        {% if user.department %}
        <a href="{% url 'organizations:department_detail' pk=user.department.pk %}"
           class="flex items-center gap-3 p-3 rounded-lg transition {% if 'departments' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
            <i data-lucide="building-2" class="w-5 h-5 flex-shrink-0"></i>
            <span class="sidebar-text text-sm font-semibold whitespace-nowrap">{% trans "My Department" %}</span>
        </a>
        {% endif %}

        {% else %}
        <!-- Everything below is hidden from Department Champions -->

        <!-- ===== SECTION 1: OPERATIONS ===== -->

        <!-- Command Center -->
        {% if not user.is_basic_staff and not user.is_department_manager %}
        <a href="{% url 'dashboard:command-center' %}"
           class="flex items-center gap-3 p-3 rounded-lg transition {% if request.resolver_match.url_name == 'command-center' %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
            <i data-lucide="command" class="w-5 h-5 flex-shrink-0"></i>
            <span class="sidebar-text text-sm font-semibold whitespace-nowrap">{% trans "Command Center" %}</span>
        </a>
        {% endif %}

        <!-- Source User Dashboard (Source Users only) -->
        {% if user.source_user_profile %}
        <a href="{% url 'px_sources:source_user_dashboard' %}"
           class="flex items-center gap-3 p-3 rounded-lg transition {% if 'source_user_dashboard' in request.resolver_match.url_name %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
            <i data-lucide="radio" class="w-5 h-5 flex-shrink-0"></i>
            <span class="sidebar-text text-sm font-semibold whitespace-nowrap">{% trans "My Source Dashboard" %}</span>
        </a>
        {% endif %}

        <!-- ===== SECTION 2: CORE FEEDBACK ===== -->
        {% if not user.is_basic_staff and not user.is_department_manager and not user.is_director %}

        <!-- Complaints -->
        <a href="{% url 'complaints:complaint_list' %}" 
           class="flex items-center gap-3 p-3 rounded-lg transition {% if 'complaints' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
            <i data-lucide="file-text" class="w-5 h-5 flex-shrink-0"></i>
            <span class="sidebar-text text-sm font-semibold whitespace-nowrap">{% trans "Complaints" %}</span>
        </a>

        <!-- Inquiries -->
        <a href="{% url 'inquiries:inquiry_list' %}"
           class="flex items-center gap-3 p-3 rounded-lg transition {% if '/inquiries' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
            <i data-lucide="help-circle" class="w-5 h-5 flex-shrink-0"></i>
            <span class="sidebar-text text-sm font-semibold whitespace-nowrap">{% trans "Inquiries" %}</span>
        </a>

        <!-- Observations -->
        <a href="{% url 'observations:observation_list' %}"
           class="flex items-center gap-3 p-3 rounded-lg transition {% if 'observations' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
            <i data-lucide="eye" class="w-5 h-5 flex-shrink-0"></i>
            <span class="sidebar-text text-sm font-semibold whitespace-nowrap">{% trans "Observations" %}</span>
        </a>

        <!-- Suggestions -->
        {% if not user.source_user_profile %}
        <a href="{% url 'feedback:feedback_list' %}?feedback_type=suggestion"
           class="flex items-center gap-3 p-3 rounded-lg transition {% if 'suggestions' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
            <i data-lucide="lightbulb" class="w-5 h-5 flex-shrink-0"></i>
            <span class="sidebar-text text-sm font-semibold whitespace-nowrap">{% trans "Suggestions" %}</span>
        </a>
        {% endif %}

        <!-- Appreciation -->
        {% if not user.source_user_profile %}
        <a href="{% url 'appreciation:appreciation_list' %}" 
           class="flex items-center gap-3 p-3 rounded-lg transition {% if 'appreciation' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
            <i data-lucide="heart" class="w-5 h-5 flex-shrink-0"></i>
            <span class="sidebar-text text-sm font-semibold whitespace-nowrap">{% trans "Appreciation" %}</span>
        </a>
        {% endif %}

        {% endif %}{# end core feedback section #}

        <!-- ===== SECTION 3: PEOPLE & RECORDS ===== -->

        <!-- Patients -->
        {% if not user.is_basic_staff and not user.is_department_manager and not user.is_director %}
        {% if not user.source_user_profile %}
        <a href="{% url 'organizations:patient_list' %}" 
           class="flex items-center gap-3 p-3 rounded-lg transition {% if 'patients' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
            <i data-lucide="heart-pulse" class="w-5 h-5 flex-shrink-0"></i>
            <span class="sidebar-text text-sm font-semibold whitespace-nowrap">{% trans "Patients" %}</span>
        </a>
        {% endif %}
        {% endif %}

        <!-- Physicians -->
        {% if not user.is_basic_staff and not user.is_department_manager and not user.is_director %}
        {% if not user.source_user_profile %}
        <div class="physicians-nav-container">
            <button onclick="togglePhysiciansMenu(event)" 
               class="w-full flex items-center gap-3 p-3 rounded-lg transition {% if 'physicians' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                <i data-lucide="stethoscope" class="w-5 h-5 flex-shrink-0"></i>
                <span class="sidebar-text text-sm font-semibold whitespace-nowrap flex-1">{% trans "Physicians" %}</span>
                <i data-lucide="chevron-down" class="sidebar-text w-4 h-4 flex-shrink-0 transform transition-transform duration-200 {% if 'physicians' in request.path %}rotate-180{% endif %}" id="physicians-chevron"></i>
            </button>
            <div class="submenu {% if 'physicians' in request.path %}open{% endif %} space-y-1 mt-1" id="physicians-submenu">
                <a href="{% url 'physicians:physician_ratings_dashboard' %}"
                   class="flex items-center gap-2 p-2 rounded-lg transition {% if request.resolver_match.url_name == 'physician_ratings_dashboard' %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="layout-dashboard" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "Dashboard" %}</span>
                </a>
                <a href="{% url 'physicians:physician_list' %}"
                   class="flex items-center gap-2 p-2 rounded-lg transition {% if request.resolver_match.url_name == 'physician_list' %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="users" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "All Physicians" %}</span>
                </a>
                <a href="{% url 'physicians:leaderboard' %}"
                   class="flex items-center gap-2 p-2 rounded-lg transition {% if 'leaderboard' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="trophy" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "Leaderboard" %}</span>
                </a>
                {% if user.is_px_admin or user.is_hospital_admin or user.is_px_management %}
                <a href="{% url 'physicians:doctor_rating_fetch' %}"
                   class="flex items-center gap-2 p-2 rounded-lg transition {% if request.resolver_match.url_name == 'doctor_rating_fetch' %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="cloud-download" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "Fetch Ratings" %}</span>
                </a>
                <a href="{% url 'physicians:doctor_rating_import' %}" 
                   class="flex items-center gap-2 p-2 rounded-lg transition {% if 'import' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="upload" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "Import Ratings" %}</span>
                </a>
                {% endif %}
            </div>
        </div>
        {% endif %}
        {% endif %}

        <!-- Staff -->
        {% if not user.is_basic_staff and not user.is_department_manager and not user.is_director %}
        {% if not user.source_user_profile %}
        <div class="staff-nav-container">
            <button onclick="toggleStaffMenu(event)" 
               class="w-full flex items-center gap-3 p-3 rounded-lg transition {% if 'staff' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                <i data-lucide="users" class="w-5 h-5 flex-shrink-0"></i>
                <span class="sidebar-text text-sm font-semibold whitespace-nowrap flex-1">{% trans "Staff" %}</span>
                <i data-lucide="chevron-down" class="sidebar-text w-4 h-4 flex-shrink-0 transform transition-transform duration-200 {% if 'staff' in request.path %}rotate-180{% endif %}" id="staff-chevron"></i>
            </button>
            <div class="submenu {% if 'staff' in request.path %}open{% endif %} space-y-1 mt-1" id="staff-submenu">
                <a href="{% url 'organizations:staff_list' %}" 
                   class="flex items-center gap-2 p-2 rounded-lg transition {% if request.resolver_match.url_name == 'staff_list' %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="list" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "All Staff" %}</span>
                </a>
                <a href="{% url 'organizations:staff_hierarchy_d3' %}" 
                   class="flex items-center gap-2 p-2 rounded-lg transition {% if 'hierarchy' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="git-branch" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "Hierarchy" %}</span>
                </a>
                {% if user.is_px_admin %}
                <a href="{% url 'accounts:staff-activity-log' %}"
                   class="flex items-center gap-2 p-2 rounded-lg transition {% if 'activity' in request.path and 'standards' not in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="activity" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "Staff Activity" %}</span>
                </a>
                {% endif %}
            </div>
        </div>
        {% endif %}
        {% endif %}

        <!-- Departments -->
        {% if not user.is_basic_staff and not user.is_department_manager and not user.is_director %}
        {% if not user.source_user_profile %}
        {% if user.is_champion and user.department %}
        <a href="{% url 'organizations:department_detail' pk=user.department.pk %}"
           class="flex items-center gap-3 p-3 rounded-lg transition {% if 'departments' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
            <i data-lucide="building-2" class="w-5 h-5 flex-shrink-0"></i>
            <span class="sidebar-text text-sm font-semibold whitespace-nowrap">{% trans "My Department" %}</span>
        </a>
        {% else %}
        <a href="{% url 'organizations:department_list' %}"
           class="flex items-center gap-3 p-3 rounded-lg transition {% if 'departments' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
            <i data-lucide="building-2" class="w-5 h-5 flex-shrink-0"></i>
            <span class="sidebar-text text-sm font-semibold whitespace-nowrap">{% trans "Departments" %}</span>
        </a>
        {% endif %}
        {% endif %}
        {% endif %}

        <!-- My Department (Basic Staff & Department Managers only) -->
        {% if user.is_basic_staff or user.is_department_manager %}
        {% if user.department %}
        <a href="{% url 'organizations:department_detail' pk=user.department.pk %}"
           class="flex items-center gap-3 p-3 rounded-lg transition {% if 'departments' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
            <i data-lucide="building-2" class="w-5 h-5 flex-shrink-0"></i>
            <span class="sidebar-text text-sm font-semibold whitespace-nowrap">{% trans "My Department" %}</span>
        </a>
        {% endif %}
        {% endif %}

        <!-- Departments (Director only - shows their managed departments) -->
        {% if user.is_director %}
        <a href="{% url 'organizations:department_list' %}"
           class="flex items-center gap-3 p-3 rounded-lg transition {% if 'departments' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
            <i data-lucide="building-2" class="w-5 h-5 flex-shrink-0"></i>
            <span class="sidebar-text text-sm font-semibold whitespace-nowrap">{% trans "Departments" %}</span>
        </a>
        {% endif %}

        <!-- My Performance (PX Employee only) -->
        {% if user.is_px_employee and not user.is_px_admin and not user.is_hospital_admin and not user.is_department_manager and not user.is_px_management %}
        {% if not user.source_user_profile %}
        <a href="{% url 'dashboard:my_performance' %}"
           class="flex items-center gap-3 p-3 rounded-lg transition {% if 'my/performance' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
            <i data-lucide="bar-chart-2" class="w-5 h-5 flex-shrink-0"></i>
            <span class="sidebar-text text-sm font-semibold whitespace-nowrap">{% trans "My Performance" %}</span>
        </a>
        {% endif %}
        {% endif %}

        <!-- Performance (Admin & PX Management - NOT for Source Users) -->
        {% if user.is_px_admin or user.is_hospital_admin or user.is_px_management %}
        {% if not user.source_user_profile %}
        <div class="performance-nav-container">
            <button onclick="togglePerformanceMenu(event)" 
               class="w-full flex items-center gap-3 p-3 rounded-lg transition {% if 'admin-evaluation' in request.path or 'employee-evaluation' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                <i data-lucide="bar-chart-2" class="w-5 h-5 flex-shrink-0"></i>
                <span class="sidebar-text text-sm font-semibold whitespace-nowrap flex-1">{% trans "Performance" %}</span>
                <i data-lucide="chevron-down" class="sidebar-text w-4 h-4 flex-shrink-0 transform transition-transform duration-200 {% if 'admin-evaluation' in request.path or 'employee-evaluation' in request.path %}rotate-180{% endif %}" id="performance-chevron"></i>
            </button>
            <div class="submenu {% if 'admin-evaluation' in request.path or 'employee-evaluation' in request.path %}open{% endif %} space-y-1 mt-1" id="performance-submenu">
                <a href="{% url 'dashboard:admin_evaluation' %}"
                   class="flex items-center gap-2 p-2 rounded-lg transition {% if 'admin-evaluation' in request.path and 'employee' not in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="shield-check" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "Admin Evaluation" %}</span>
                </a>
                <a href="{% url 'dashboard:employee_evaluation' %}"
                   class="flex items-center gap-2 p-2 rounded-lg transition {% if 'employee-evaluation' in request.path and 'charts' not in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="users" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "Employee Evaluation" %}</span>
                </a>
                <a href="{% url 'dashboard:employee_evaluation_charts' %}"
                   class="flex items-center gap-2 p-2 rounded-lg transition {% if 'employee-evaluation/charts' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="bar-chart-2" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "Evaluation Charts" %}</span>
                </a>
            </div>
        </div>
        {% endif %}
        {% endif %}

        <!-- ===== SECTION 4: QUALITY & IMPROVEMENT ===== -->
        {% if not user.is_basic_staff and not user.is_department_manager and not user.is_director %}

        <!-- QI Projects -->
        {% if not user.source_user_profile %}
        <a href="{% url 'projects:project_list' %}"
           class="flex items-center gap-3 p-3 rounded-lg transition {% if 'projects' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                <i data-lucide="target" class="w-5 h-5 flex-shrink-0"></i>
                <span class="sidebar-text text-sm font-semibold whitespace-nowrap">{% trans "QI Projects" %}</span>
        </a>
        {% endif %}

        <!-- Surveys -->
        {% if not user.source_user_profile %}
        {% url 'surveys:instance_list' as survey_instances_url %}
        {% url 'surveys:template_list' as survey_templates_url %}
        {% url 'surveys:template_create' as survey_create_url %}
        {% url 'surveys:manual_send' as survey_send_url %}
        {% url 'surveys:analytics_reports' as survey_reports_url %}
        {% url 'integrations:survey-mapping-settings' as survey_mapping_url %}
        <div class="survey-nav-container">
            <button onclick="toggleSurveyMenu(event)" 
               class="w-full flex items-center gap-3 p-3 rounded-lg transition {% if 'surveys' in request.path or 'survey-mapping' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                <i data-lucide="clipboard-list" class="w-5 h-5 flex-shrink-0"></i>
                <span class="sidebar-text text-sm font-semibold whitespace-nowrap flex-1">{% trans "Surveys" %}</span>
                <i data-lucide="chevron-down" class="sidebar-text w-4 h-4 flex-shrink-0 transform transition-transform duration-200 {% if 'surveys' in request.path or 'survey-mapping' in request.path %}rotate-180{% endif %}" id="survey-chevron"></i>
            </button>
            <div class="submenu {% if 'surveys' in request.path or 'survey-mapping' in request.path %}open{% endif %} space-y-1 mt-1" id="survey-submenu">
                <a href="{{ survey_instances_url }}" 
                   class="flex items-center gap-2 p-2 rounded-lg transition {% if 'surveys' in request.path and 'templates' not in request.path and 'send' not in request.path and 'reports' not in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="list" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "Survey List" %}</span>
                </a>
                {% if not user.is_px_employee or user.is_px_admin or user.is_hospital_admin or user.is_department_manager %}
                <a href="{{ survey_templates_url }}"
                   class="flex items-center gap-2 p-2 rounded-lg transition {% if 'templates' in request.path and 'questions' not in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="files" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "Templates" %}</span>
                </a>
                <a href="{{ survey_create_url }}"
                    class="flex items-center gap-2 p-2 rounded-lg transition {% if 'templates/create' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="plus-circle" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "Create Survey" %}</span>
                </a>
                <a href="{{ survey_send_url }}"
                   class="flex items-center gap-2 p-2 rounded-lg transition {% if '/send' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="send" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "Manual Send" %}</span>
                </a>
                <a href="{% url 'surveys:his_patient_import' %}" 
                   class="flex items-center gap-2 p-2 rounded-lg transition {% if 'his-import' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="upload" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "HIS Import" %}</span>
                </a>
                <a href="{{ survey_mapping_url }}" 
                   class="flex items-center gap-2 p-2 rounded-lg transition {% if 'survey-mapping' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="link" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "Mapping" %}</span>
                </a>
                {% endif %}
            </div>
        </div>
        {% endif %}

        <!-- Standards -->
        {% if user.is_px_admin or user.is_hospital_admin or user.is_px_employee %}
        {% if not user.source_user_profile %}
        <div class="standards-nav-container">
            <button onclick="toggleStandardsMenu(event)"
               class="w-full flex items-center gap-3 p-3 rounded-lg transition {% if 'standards' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                <i data-lucide="clipboard-check" class="w-5 h-5 flex-shrink-0"></i>
                <span class="sidebar-text text-sm font-semibold whitespace-nowrap flex-1">{% trans "Standards" %}</span>
                <i data-lucide="chevron-down" class="sidebar-text w-4 h-4 flex-shrink-0 transform transition-transform duration-200 {% if 'standards' in request.path %}rotate-180{% endif %}" id="standards-chevron"></i>
            </button>
            <div class="submenu {% if 'standards' in request.path %}open{% endif %} space-y-1 mt-1" id="standards-submenu">
                <a href="{% url 'standards:dashboard' %}"
                   class="flex items-center gap-2 p-2 rounded-lg transition {% if request.resolver_match.url_name == 'dashboard' and 'standards' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="layout-dashboard" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "Dashboard" %}</span>
                </a>
                <a href="{% url 'standards:search' %}"
                   class="flex items-center gap-2 p-2 rounded-lg transition {% if request.resolver_match.url_name == 'search' %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="search" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "Standards List" %}</span>
                </a>
                {% if not user.is_px_employee or user.is_px_admin or user.is_hospital_admin %}
                <a href="{% url 'standards:source_list' %}"
                   class="flex items-center gap-2 p-2 rounded-lg transition {% if 'sources' in request.path and 'standards' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="folder" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "Sources" %}</span>
                </a>
                <a href="{% url 'standards:category_list' %}"
                   class="flex items-center gap-2 p-2 rounded-lg transition {% if 'categories' in request.path and 'standards' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="tags" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "Categories" %}</span>
                </a>
                <a href="{% url 'standards:activity_type_list' %}"
                   class="flex items-center gap-2 p-2 rounded-lg transition {% if 'activity-types' in request.path and 'standards' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="tag" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "Activity Types" %}</span>
                </a>
                {% endif %}
            </div>
        </div>
        {% endif %}
        {% endif %}

        {% endif %}{# end quality/improvement section #}

        <!-- ===== SECTION 5: SOURCES & OUTREACH ===== -->
        {% if not user.is_basic_staff and not user.is_department_manager and not user.is_director %}

        <!-- PX Sources -->
        {% if not user.source_user_profile %}
        <div class="px-sources-nav-container">
            <button onclick="togglePXSourcesMenu(event)" 
               class="w-full flex items-center gap-3 p-3 rounded-lg transition {% if 'px-sources' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                <i data-lucide="radio" class="w-5 h-5 flex-shrink-0"></i>
                <span class="sidebar-text text-sm font-semibold whitespace-nowrap flex-1">{% trans "PX Sources" %}</span>
                <i data-lucide="chevron-down" class="sidebar-text w-4 h-4 flex-shrink-0 transform transition-transform duration-200 {% if 'px-sources' in request.path %}rotate-180{% endif %}" id="px-sources-chevron"></i>
            </button>
            <div class="submenu {% if 'px-sources' in request.path %}open{% endif %} space-y-1 mt-1" id="px-sources-submenu">
                <a href="{% url 'px_sources:source_list' %}" 
                   class="flex items-center gap-2 p-2 rounded-lg transition {% if request.resolver_match.url_name == 'source_list' %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="list" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "All Sources" %}</span>
                </a>
                <a href="{% url 'complaints:government_ticket_list' %}" 
                   class="flex items-center gap-2 p-2 rounded-lg transition {% if 'government-tickets' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="building-2" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "Government Tickets" %}</span>
                </a>
                <a href="{% url 'px_sources:communication_request_list' %}"
                   class="flex items-center gap-2 p-2 rounded-lg transition {% if 'communication-requests/manage' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="message-square" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "Comm. Requests" %}</span>
                </a>
            </div>
        </div>
        {% endif %}

        <!-- Social Media -->
        {% if user.is_px_admin %}
        <a href="{% url 'social:dashboard' %}"
           class="flex items-center gap-3 p-3 rounded-lg transition {% if 'social' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
            <i data-lucide="share-2" class="w-5 h-5 flex-shrink-0"></i>
            <span class="sidebar-text text-sm font-semibold whitespace-nowrap">{% trans "Social Media" %}</span>
        </a>
        {% endif %}

        <!-- Send SMS -->
        {% if user.is_px_admin or user.is_hospital_admin %}
        {% if not user.source_user_profile %}
        <a href="{% url 'notifications:send_sms_direct' %}" 
           class="flex items-center gap-3 p-3 rounded-lg transition {% if 'send-sms' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
            <i data-lucide="message-square" class="w-5 h-5 flex-shrink-0"></i>
            <span class="sidebar-text text-sm font-semibold whitespace-nowrap">{% trans "Send SMS" %}</span>
        </a>
        {% endif %}
        {% endif %}

        {% endif %}{# end sources/outreach section #}

        <!-- ===== SECTION 6: REPORTS ===== -->
        {% if not user.is_basic_staff and not user.is_department_manager and not user.is_director %}

        {% if user.is_px_admin or user.is_hospital_admin or user.is_px_management or user.is_px_employee %}
        {% if not user.source_user_profile %}
        <div class="reports-nav-container">
            <button onclick="toggleReportsMenu(event)" 
               class="w-full flex items-center gap-3 p-3 rounded-lg transition {% if '/reports/' in request.path or 'kpi-reports' in request.path or 'census' in request.path or 'observations-report' in request.path or 'complaints-yearly' in request.path or 'comments-report' in request.path or 'standards' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                <i data-lucide="file-bar-chart" class="w-5 h-5 flex-shrink-0"></i>
                <span class="sidebar-text text-sm font-semibold whitespace-nowrap flex-1">{% trans "Reports" %}</span>
                <i data-lucide="chevron-down" class="sidebar-text w-4 h-4 flex-shrink-0 transform transition-transform duration-200 {% if '/reports/' in request.path or 'kpi-reports' in request.path or 'census' in request.path or 'observations-report' in request.path or 'complaints-yearly' in request.path or 'comments-report' in request.path or 'standards' in request.path %}rotate-180{% endif %}" id="reports-chevron"></i>
            </button>
            <div class="submenu {% if '/reports/' in request.path or 'kpi-reports' in request.path or 'census' in request.path or 'observations-report' in request.path or 'complaints-yearly' in request.path or 'comments-report' in request.path or 'standards' in request.path %}open{% endif %} space-y-1 mt-1" id="reports-submenu">
                {% if user.is_px_admin or user.is_hospital_admin or user.is_px_management %}
                <a href="{% url 'reports:builder' %}"
                   class="flex items-center gap-2 p-2 rounded-lg transition {% if 'builder' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="plus-circle" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "Create Report" %}</span>
                </a>
                {% endif %}
                <a href="{% url 'reports:saved_reports' %}" 
                   class="flex items-center gap-2 p-2 rounded-lg transition {% if 'saved' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="folder-open" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "Saved Reports" %}</span>
                </a>
                <a href="{% url 'analytics:kpi_report_list' %}" 
                   class="flex items-center gap-2 p-2 rounded-lg transition {% if 'kpi-reports' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="target" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "KPI Reports" %}</span>
                </a>
                <a href="{% url 'dashboard:census_report' %}"
                   class="flex items-center gap-2 p-2 rounded-lg transition {% if 'census' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="bar-chart-3" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "Census Report" %}</span>
                </a>
                <a href="{% url 'dashboard:inquiry_report' %}"
                   class="flex items-center gap-2 p-2 rounded-lg transition {% if 'inquiries-report' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="help-circle" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "Inquiry Reports" %}</span>
                </a>
                <a href="{% url 'dashboard:observation_report' %}"
                   class="flex items-center gap-2 p-2 rounded-lg transition {% if 'observations-report' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="eye" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "Observation Report" %}</span>
                </a>
                <a href="{% url 'dashboard:complaint_quarterly_report' %}"
                    class="flex items-center gap-2 p-2 rounded-lg transition {% if 'complaints-yearly' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="file-text" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "Complaint Report" %}</span>
                </a>
                <a href="{% url 'dashboard:comments_report' %}"
                    class="flex items-center gap-2 p-2 rounded-lg transition {% if 'comments-report' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="message-square" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "Comments Analysis" %}</span>
                </a>
                <a href="{% url 'dashboard:standards_dashboard' %}"
                    class="flex items-center gap-2 p-2 rounded-lg transition {% if 'standards' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}" style="display: none;">
                    <i data-lucide="shield-check" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "Standards Compliance" %}</span>
                </a>
            </div>
        </div>
        {% endif %}
        {% endif %}

        {% endif %}{# end reports section #}

        <!-- ===== SECTION 7: REFERENCE & CONFIG ===== -->
        {% if not user.is_basic_staff and not user.is_department_manager and not user.is_director %}

        <!-- References -->
        {% if not user.source_user_profile %}
        <div class="references-nav-container">
            <button onclick="toggleReferencesMenu(event)"
               class="w-full flex items-center gap-3 p-3 rounded-lg transition {% if 'references' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                <i data-lucide="folder-open" class="w-5 h-5 flex-shrink-0"></i>
                <span class="sidebar-text text-sm font-semibold whitespace-nowrap flex-1">{% trans "References" %}</span>
                <i data-lucide="chevron-down" class="sidebar-text w-4 h-4 flex-shrink-0 transform transition-transform duration-200 {% if 'references' in request.path %}rotate-180{% endif %}" id="references-chevron"></i>
            </button>
            <div class="submenu {% if 'references' in request.path %}open{% endif %} space-y-1 mt-1" id="references-submenu">
                <a href="{% url 'references:dashboard' %}"
                   class="flex items-center gap-2 p-2 rounded-lg transition {% if request.resolver_match.url_name == 'dashboard' %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="layout-dashboard" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "Dashboard" %}</span>
                </a>
                <a href="{% url 'references:search' %}"
                   class="flex items-center gap-2 p-2 rounded-lg transition {% if request.resolver_match.url_name == 'search' %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="search" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "Search Documents" %}</span>
                </a>
                {% if user.is_px_admin or user.is_hospital_admin or user.is_department_manager %}
                <a href="{% url 'references:document_create' %}"
                   class="flex items-center gap-2 p-2 rounded-lg transition {% if 'document_create' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="upload" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "Upload Document" %}</span>
                </a>
                <a href="{% url 'references:folder_create' %}"
                   class="flex items-center gap-2 p-2 rounded-lg transition {% if 'folder_create' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="folder-plus" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "New Folder" %}</span>
                </a>
                {% endif %}
            </div>
        </div>
        {% endif %}

        <!-- Acknowledgements -->
        {% if user.is_authenticated and not user.source_user_profile %}
        <a href="{% url 'accounts:simple_acknowledgements:employee_list' %}"
           class="flex items-center gap-3 p-3 rounded-lg transition {% if 'simple-acknowledgements' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
            <i data-lucide="clipboard-signature" class="w-5 h-5 flex-shrink-0"></i>
            <span class="sidebar-text text-sm font-semibold whitespace-nowrap flex-1">{% trans "Acknowledgements" %}</span>
            {% if pending_acknowledgements_count > 0 %}
            <span class="sidebar-text bg-red-500 text-white text-xs font-bold px-2 py-0.5 rounded-full min-w-[1.5rem] text-center">
                {{ pending_acknowledgements_count }}
            </span>
            {% endif %}
        </a>
        {% endif %}

        <!-- System Config -->
        {% if user.is_px_admin or user.is_hospital_admin %}
        {% if not user.source_user_profile %}
        <a href="{% url 'config:dashboard' %}"
           class="flex items-center gap-3 p-3 rounded-lg transition {% if 'config' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
            <i data-lucide="settings" class="w-5 h-5 flex-shrink-0"></i>
            <span class="sidebar-text text-sm font-semibold whitespace-nowrap">{% trans "System Config" %}</span>
        </a>
        <a href="{% url 'config:deleted_items' %}"
           class="flex items-center gap-3 p-3 rounded-lg transition {% if 'deleted' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
            <i data-lucide="trash-2" class="w-5 h-5 flex-shrink-0"></i>
            <span class="sidebar-text text-sm font-semibold whitespace-nowrap">{% trans "Deleted Items" %}</span>
        </a>
        {% endif %}
        {% endif %}

        {% endif %}{# end reference/config section #}

        <!-- Executive Summary (commented out) -->
        {% comment %} {% if user.is_executive or user.is_px_admin %}
        <a href="{% url 'executive:executive_dashboard' %}"
           class="flex items-center gap-3 p-3 rounded-lg transition {% if 'executive' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
            <i data-lucide="briefcase" class="w-5 h-5 flex-shrink-0"></i>
            <span class="sidebar-text text-sm font-semibold whitespace-nowrap">{% trans "Executive Summary" %}</span>
        </a>
        {% endif %} {% endcomment %}

        {% endif %}{# end Department Champion hide block #}
    </nav>

    <!-- Hospital Switcher (PX Admin only) -->
    {% if is_px_admin and hospitals_list %}
    <div class="px-3 py-2 border-t border-white/10">
        <div class="mb-2 px-2">
            <p class="text-[10px] font-semibold text-white/50 uppercase tracking-wider">{% trans "Hospital" %}</p>
        </div>
        <div class="relative">
            <select 
                id="hospitalSwitcher"
                onchange="switchHospital(this.value)"
                class="w-full bg-white/10 border border-white/20 rounded-lg py-2 px-3 pr-8 text-xs font-semibold text-white appearance-none cursor-pointer hover:bg-white/15 transition focus:outline-none focus:ring-2 focus:ring-blue/50"
            >
                {% for hospital in hospitals_list %}
                <option 
                    value="{{ hospital.id }}" 
                    {% if current_hospital and current_hospital.id == hospital.id %}selected{% endif %}
                >
                    {{ hospital.name }}
                </option>
                {% endfor %}
            </select>
            <div class="absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none">
                <i data-lucide="chevron-down" class="w-3.5 h-3.5 text-white/50"></i>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Pin Toggle -->
    <div class="px-2 py-2 border-t border-white/10">
        <button onclick="toggleSidebarPin()" id="sidebarPinBtn"
                class="w-full flex items-center gap-3 p-2.5 rounded-lg transition opacity-70 hover:opacity-100 hover:bg-white/10">
            <i data-lucide="pin" class="w-5 h-5 flex-shrink-0" id="sidebarPinIcon"></i>
            <span class="sidebar-text text-sm font-semibold whitespace-nowrap" id="sidebarPinText">{% trans "Pin Sidebar" %}</span>
        </button>
    </div>

    <!-- Language Switcher -->
    <div class="px-3 py-2">
        <div class="flex items-center gap-2">
            {% get_available_languages as LANGUAGES %}
            {% get_current_language as LANGUAGE_CODE %}
            {% for lang_code, lang_name in LANGUAGES %}
                <a href="{% url 'core:set_language' %}?language={{ lang_code }}"
                   class="flex-1 flex items-center justify-center gap-1.5 px-2 py-1.5 rounded-lg border transition-all duration-200 font-semibold text-xs
                          {% if LANGUAGE_CODE == lang_code %}
                              border-white/40 bg-white/20 text-white
                          {% else %}
                              border-white/15 text-white/60 hover:bg-white/10 hover:text-white hover:border-white/30
                          {% endif %}">
                    <span class="text-sm">
                        {% if lang_code == 'en' %}🇬🇧{% elif lang_code == 'ar' %}🇸🇦{% endif %}
                    </span>
                    <span class="sidebar-text">{{ lang_name }}</span>
                </a>
            {% endfor %}
        </div>
    </div>

</aside>

<script>
function switchHospital(hospitalId) {
    if (!hospitalId) return;
    
    // Show loading state
    const select = document.getElementById('hospitalSwitcher');
    select.disabled = true;
    
    // Get CSRF token from global variable (not from cookie due to httpOnly)
    const csrfToken = window.sidebarCsrfToken || getCookie('csrftoken');
    
    // Create form data
    const formData = new FormData();
    formData.append('hospital_id', hospitalId);
    formData.append('csrfmiddlewaretoken', csrfToken);
    
    // Make AJAX request
    fetch('{% url "core:switch_hospital" %}', {
        method: 'POST',
        body: formData,
        headers: {
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Reload page to apply new hospital context
            window.location.reload();
        } else {
            alert('{% trans "Failed to switch hospital: " %}' + (data.error || '{% trans "Unknown error" %}'));
            select.disabled = false;
        }
    })
    .catch(error => {
        console.error('Error switching hospital:', error);
        alert('{% trans "An error occurred while switching hospitals" %}');
        select.disabled = false;
    });
}

function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

function toggleSurveyMenu(event) {
    event.preventDefault();
    const submenu = document.getElementById('survey-submenu');
    const chevron = document.getElementById('survey-chevron');
    submenu.classList.toggle('open');
    chevron.classList.toggle('rotate-180');
}

function togglePhysiciansMenu(event) {
    event.preventDefault();
    const submenu = document.getElementById('physicians-submenu');
    const chevron = document.getElementById('physicians-chevron');
    submenu.classList.toggle('open');
    chevron.classList.toggle('rotate-180');
}

function toggleStaffMenu(event) {
    event.preventDefault();
    const submenu = document.getElementById('staff-submenu');
    const chevron = document.getElementById('staff-chevron');
    submenu.classList.toggle('open');
    chevron.classList.toggle('rotate-180');
}

function togglePXSourcesMenu(event) {
    event.preventDefault();
    const submenu = document.getElementById('px-sources-submenu');
    const chevron = document.getElementById('px-sources-chevron');
    submenu.classList.toggle('open');
    chevron.classList.toggle('rotate-180');
}

function toggleAcknowledgementsMenu(event) {
    event.preventDefault();
    const submenu = document.getElementById('acknowledgements-submenu');
    const chevron = document.getElementById('acknowledgements-chevron');
    submenu.classList.toggle('open');
    chevron.classList.toggle('rotate-180');
}

function toggleReportsMenu(event) {
    event.preventDefault();
    const submenu = document.getElementById('reports-submenu');
    const chevron = document.getElementById('reports-chevron');
    submenu.classList.toggle('open');
    chevron.classList.toggle('rotate-180');
}

function toggleQIMenu(event) {
    event.preventDefault();
    const submenu = document.getElementById('qi-submenu');
    const chevron = document.getElementById('qi-chevron');
    submenu.classList.toggle('open');
    chevron.classList.toggle('rotate-180');
}

function toggleReferencesMenu(event) {
    event.preventDefault();
    const submenu = document.getElementById('references-submenu');
    const chevron = document.getElementById('references-chevron');
    submenu.classList.toggle('open');
    chevron.classList.toggle('rotate-180');
}

function toggleStandardsMenu(event) {
    event.preventDefault();
    const submenu = document.getElementById('standards-submenu');
    const chevron = document.getElementById('standards-chevron');
    submenu.classList.toggle('open');
    chevron.classList.toggle('rotate-180');
}

function togglePerformanceMenu(event) {
    event.preventDefault();
    const submenu = document.getElementById('performance-submenu');
    const chevron = document.getElementById('performance-chevron');
    submenu.classList.toggle('open');
    chevron.classList.toggle('rotate-180');
}

function toggleSidebarPin() {
    const sidebar = document.getElementById('sidebar');
    const isPinned = sidebar.classList.toggle('sidebar-expanded');
    localStorage.setItem('sidebar_pinned', isPinned);
    updateSidebarPinUI(isPinned);
    updateMainContentMargin(isPinned);
}

function updateSidebarPinUI(isPinned) {
    const icon = document.getElementById('sidebarPinIcon');
    const text = document.getElementById('sidebarPinText');
    if (isPinned) {
        icon.setAttribute('data-lucide', 'pin-off');
        text.textContent = '{% trans "Unpin Sidebar" %}';
    } else {
        icon.setAttribute('data-lucide', 'pin');
        text.textContent = '{% trans "Pin Sidebar" %}';
    }
    lucide.createIcons();
}

function updateMainContentMargin(isPinned) {
    const mainContent = document.querySelector('.main-content');
    if (!mainContent) return;
    const isRtl = document.documentElement.dir === 'rtl';
    if (isPinned) {
        if (isRtl) {
            mainContent.style.marginLeft = '';
            mainContent.style.marginRight = '16rem';
        } else {
            mainContent.style.marginLeft = '16rem';
        }
    } else {
        mainContent.style.marginLeft = '';
        mainContent.style.marginRight = '';
    }
}

document.addEventListener('DOMContentLoaded', function() {
    const isPinned = localStorage.getItem('sidebar_pinned') === 'true';
    if (isPinned && window.innerWidth >= 1024) {
        const sidebar = document.getElementById('sidebar');
        sidebar.classList.add('sidebar-expanded');
        updateSidebarPinUI(true);
        updateMainContentMargin(true);
    }
});


</script>
