{% load static %} {% load i18n %} {% load attendancefilters offboarding_filter %} 
{% load recruitmentfilters %} {% load onboardingfilters %} {% load basefilters %}
<script>
  function activeNav(id) {
    const navElement = $(`#${id}`);
    const activeNavElement = navElement.after();
  }
</script>
<div
  class="oh-sidebar"
  style="position: -webkit-sticky; position: sticky; top: 0"
>
<div class="oh-sidebar__company" style="padding: 14px">
    {% if request.session.selected_company_instance %}
    <span class="mr-3">
      {% if not request.session.selected_company_instance %}
      <img
      src="https://ui-avatars.com/api/?name=C&background=random"
      style="width: 34px; border-radius: 3px"
      />
      {% else %}
      <img
      src="{{request.session.selected_company_instance.icon}}"
      style="width: 34px; border-radius: 3px"
      />
      {% endif %}
    </span>
    <div class="oh-sidebar__company-details">
      <span class="oh-sidebar__company-title" style="font-size: 13px"
      >{{request.session.selected_company_instance.company}}.</span
      >
      <a href="#" class="oh-sidebar__company-link" style="font-size: 10px"
      >{% trans request.session.selected_company_instance.text %}</a
      >
    </div>
    {% else %}
    <span class="mr-3">
      {% if request.user.employee_get.employee_work_info.company_id.icon == None %}
      <img
      src="https://ui-avatars.com/api/?name=C&background=random"
      style="width: 34px; border-radius: 3px"
      />
      {% else %}
      <img
      src="/media/{{request.user.employee_get.employee_work_info.company_id.icon}}"
      style="width: 34px; border-radius: 3px"
      />
      {% endif %}
    </span>
    <div class="oh-sidebar__company-details">
      <span class="oh-sidebar__company-title" style="font-size: 13px"
      >{{request.user.employee_get.employee_work_info.company_id}}.</span
      >
      <a href="#" class="oh-sidebar__company-link" style="font-size: 10px"
      >{% trans "My Company" %}</a
      >
    </div>
    {% endif %}
  </div>
  <div class="oh-sidebar__menu">
    <ul class="oh-sidebar__menu-items">
      <li
        class="oh-sidebar__menu-item"
        x-data="{ isOpen: getOpenState('dashboardNav') }"
      >
        <a
          href="{%url 'home-page' %}"
          onclick="window.location.href=this.href; return false;"
          class="oh-sidebar__menu-link"
          data-id="dashboardNav"
          x-on:click.prevent="isOpen = !isOpen; saveOpenState('dashboardNav', isOpen)"
          x-bind:class="isOpen ? 'oh-sidebar__menu-link--active' : ''"
        >
          <div class="oh-sidebar__menu-icon">
            <img
              src="{% static 'images/ui/dashboard.svg' %}"
              alt="Dashboard"
              width="24"
              height="24"
            />
          </div>
          <span>{% trans "Dashboard" %}</span>
        </a>
      </li>

{% comment %}       
      <li
      class="oh-sidebar__menu-item"
      x-data="{ isOpen: getOpenState('announcementNav') }"
      >
        <a
          href="{%url 'announcement' %}"
          onclick="window.location.href=this.href; return false;"
          class="oh-sidebar__menu-link"
          data-id="announcementNav"
          x-on:click.prevent="isOpen = !isOpen; saveOpenState('announcementNav', isOpen)"
          x-bind:class="isOpen ? 'oh-sidebar__menu-link--active' : ''"
        >
          <div class="oh-sidebar__menu-icon">
            <img
              src="{% static 'images/ui/announcement.svg' %}"
              alt="Dashboard"
              width="24"
              height="24"
            />
          </div>
          <span>{% trans "Announcement" %}</span>
        </a>
      </li>
      
 {% endcomment %}
      {% if request.user|is_stagemanager or 'recruitment' in perms %}
      <li
        class="oh-sidebar__menu-item"
        x-data="{ isOpen: getOpenState('recNav') }"
      >
        <a
          class="oh-sidebar__menu-link"
          data-id="recNav"
          x-on:click.prevent="isOpen = !isOpen; saveOpenState('recNav', isOpen)"
          x-bind:class="isOpen ? 'oh-sidebar__menu-link--active' : ''"
          style="cursor: pointer"
        >
          <div class="oh-sidebar__menu-icon">
            <img
              src="{% static 'images/ui/recruitment.svg' %}"
              alt="Dashboard"
              width="24"
              height="24"
            />
          </div>
          <span>{% trans "Recruitments" %}</span>
        </a>
        <div
          class="oh-sidebar__submenu"
          id="recNav"
          x-show="isOpen"
          x-transition
          style="display: none"
        >
          <ul class="oh-sidebar__submenu-items">
            <li class="oh-sidebar__submenu-item">
              <a
                href="{%url 'recruitment-dashboard' %}"
                class="oh-sidebar__submenu-link"
                >{% trans "Dashboard" %}</a
              >
            </li>
            {% if perms.recruitment.view_recruitment or request.user|is_stagemanager %}
            <li class="oh-sidebar__submenu-item">
              <a
                class="oh-sidebar__submenu-link"
                href="{% url 'pipeline' %}"
                class="oh-sidebar__submenu-link"
                >{% trans "Recruitment Pipeline" %}</a
              >
            </li>
            {% endif %} {% if perms.recruitment.view_recruitmentsurvey %}
            <li class="oh-sidebar__submenu-item">
              <a
                class="oh-sidebar__submenu-link"
                href="{% url 'recruitment-survey-question-template-view' %}"
                class="oh-sidebar__submenu-link"
                >{% trans "Recruitment Survey" %}</a
              >
            </li>
            {% endif %} 
            {% if perms.recruitment.view_recruitmentmailtemplate %}
            <li class="oh-sidebar__submenu-item">
              <a
                class="oh-sidebar__submenu-link"
                href="{% url 'view-mail-templates' %}"
                class="oh-sidebar__submenu-link"
                >{% trans "Mail Templates" %}</a
              >
            </li>
            {% endif %}
            {% if perms.recruitment.view_candidate %}
            <li class="oh-sidebar__submenu-item">
              <a
                class="oh-sidebar__submenu-link"
                href="{% url 'candidate-view' %}"
                class="oh-sidebar__submenu-link"
                >{% trans "Candidate" %}</a
              >
            </li>
            {% endif %} {% if perms.recruitment.view_recruitment %}
            <li class="oh-sidebar__submenu-item">
              <a
                class="oh-sidebar__submenu-link"
                href="{% url 'recruitment-view' %}"
                class="oh-sidebar__submenu-link"
                >{% trans "Recruitment" %}</a
              >
              <a
                class="oh-sidebar__submenu-link float-end"
                href="{% url 'open-recruitments' %}"
                class="oh-sidebar__submenu-link"
                title="{% trans 'Open Recruitments' %}"
                ><ion-icon name="link-sharp" role="img" class="md hydrated" aria-label="create outline"></ion-icon>
                </a
              >
            </li>
            {% endif %} {% if perms.recruitment.view_skillzone %}
              <li class="oh-sidebar__submenu-item">
                <a
                  class="oh-sidebar__submenu-link"
                  href="{% url 'skill-zone-view' %}"
                  class="oh-sidebar__submenu-link"
                  >{% trans "Skill Zone" %}</a
                >
              </li>
            {% endif %} {% if perms.recruitment.view_stage %}
            <li class="oh-sidebar__submenu-item">
              <a
                class="oh-sidebar__submenu-link"
                href="{% url 'rec-stage-view' %}"
                class="oh-sidebar__submenu-link"
                >{% trans "Stages" %}</a
              >
            </li>
            {% endif %}
          </ul>
        </div>
      </li>
      {% endif %} {% if request.user|is_taskmanager or 'recruitment' in perms or 'onboarding' in perms %}
      <li
        class="oh-sidebar__menu-item"
        x-data="{ isOpen: getOpenState('onboardingNav') }"
      >
        <a
          class="oh-sidebar__menu-link"
          data-id="onboardingNav"
          x-on:click.prevent="isOpen = !isOpen; saveOpenState('onboardingNav', isOpen)"
          x-bind:class="isOpen ? 'oh-sidebar__menu-link--active' : ''"
          style="cursor: pointer"
        >
          <div class="oh-sidebar__menu-icon">
            <img
              src="{% static 'images/ui/rocket.svg' %}"
              alt="Dashboard"
              width="24"
              height="24"
            />
          </div>
          <span>{% trans "Onboarding" %}</span>
        </a>
        <div
          class="oh-sidebar__submenu"
          id="onboardingNav"
          style="display: none"
          x-show="isOpen"
          x-transition
          style="display: none"
        >
          <ul class="oh-sidebar__submenu-items">
            {% if perms.onboarding.view_dashboard %}
            <li class="oh-sidebar__submenu-item">
              <a
                href="{%url 'view-onboarding-dashboard' %}"
                class="oh-sidebar__submenu-link"
                >{% trans "Dashboard" %}</a
              >
            </li>
            {% endif %} {% if request.user|is_taskmanager or perms.onboarding.view_candidatestage %}
            <li class="oh-sidebar__submenu-item">
              <a
                href="{% url 'onboarding-view' %}"
                class="oh-sidebar__submenu-link"
                >{% trans "Onboarding View" %}</a
              >
            </li>
            {% endif %} {% if perms.recruitment.view_candidate %}
            <li class="oh-sidebar__submenu-item">
              <a
                href="{% url 'candidates-view' %}"
                class="oh-sidebar__submenu-link"
                >{% trans "Candidate View" %}</a
              >
            </li>
            {% endif %}
          </ul>
        </div>
      </li>
      {% endif %}
      <li
        class="oh-sidebar__menu-item"
        x-data="{ isOpen: getOpenState('employeeNav') }"
      >
        <a
          class="oh-sidebar__menu-link"
          data-id="employeeNav"
          x-on:click.prevent="isOpen = !isOpen; saveOpenState('employeeNav', isOpen)"
          x-bind:class="isOpen ? 'oh-sidebar__menu-link--active' : ''"
          style="cursor: pointer"
        >
          <div class="oh-sidebar__menu-icon">
            <img
              src="{% static 'images/ui/employees.svg' %}"
              alt="Dashboard"
              width="24"
              height="24"
            />
          </div>
          <span>{% trans "Employees" %}</span>
        </a>
        <div
          class="oh-sidebar__submenu"
          id="employeeNav"
          x-show="isOpen"
          x-transition
          style="display: none"
        >
          <ul class="oh-sidebar__submenu-items">
            <li class="oh-sidebar__submenu-item">
              <a class="oh-sidebar__submenu-link" 
                  href="{% url 'organisation-chart' %}"
                >{% trans "Staff Organogram" %}</a
              >
            </li>
            {% if request.session.selected_company == "all" or request.user.employee_get.employee_work_info.company_id.id == request.session.selected_company|default:"-1"|add:"0" %}
            <li class="oh-sidebar__submenu-item">
              <a
                class="oh-sidebar__submenu-link"
                href="/employee/employee-profile"
                >{% trans "Profile" %}</a
              >
            </li>
            {% endif %}
            <li class="oh-sidebar__submenu-item">
              <a class="oh-sidebar__submenu-link" href="/employee/employee-view"
                >{% trans "Employee" %}</a
              >
            </li>
            {% if perms.employee_document.view_documentrequest or request.user|is_reportingmanager%}
            <li class="oh-sidebar__submenu-item">
              <a
                class="oh-sidebar__submenu-link"
                href="{% url 'document-request-view' %}"
                >{% trans "Document Request" %}</a
              >
            </li>
            {% endif %}
            <li class="oh-sidebar__submenu-item">
              <a
                class="oh-sidebar__submenu-link"
                href="{% url 'shift-request-view' %}"
                >{% trans "Shift Request" %}</a
              >
            </li>
            <li class="oh-sidebar__submenu-item">
              <a
                class="oh-sidebar__submenu-link"
                href="{% url 'work-type-request-view' %}"
                >{% trans "Work Type Request" %}</a
              >
            </li>
            {% if perms.view_rotatingshiftassign or request.user|is_reportingmanager%}
            <li class="oh-sidebar__submenu-item">
              <a
                class="oh-sidebar__submenu-link"
                href="{% url 'rotating-shift-assign' %}"
                >{% trans "Rotating Shift Assign" %}</a
              >
            </li>
            {% endif %} {% if perms.view_rotatingworktypeassign or request.user|is_reportingmanager %}
            <li class="oh-sidebar__submenu-item">
              <a
                class="oh-sidebar__submenu-link"
                href="{% url 'rotating-work-type-assign' %}"
                >{% trans "Rotating Work Type Assign" %}</a
              >
            </li>
            {% endif %}

            <li class="oh-sidebar__submenu-item">
              <a
              class="oh-sidebar__submenu-link"
              href="{% url 'disciplinary-actions' %}"
              >{% trans "Disciplinary Actions" %}</a
              >
            </li>
            <li class="oh-sidebar__submenu-item">
              <a
                class="oh-sidebar__submenu-link"
                href="{% url 'view-policies' %}"
                >{% trans "Policies" %}</a
              >
            </li>
          </ul>
        </div>
      </li>
      <li
        class="oh-sidebar__menu-item"
        x-data="{ isOpen: getOpenState('payRollNav') }"
      >
        <a
          class="oh-sidebar__menu-link"
          data-id="payRollNav"
          x-on:click.prevent="isOpen = !isOpen; saveOpenState('payRollNav', isOpen)"
          x-bind:class="isOpen ? 'oh-sidebar__menu-link--active' : ''"
          style="cursor: pointer"
        >
          <div class="oh-sidebar__menu-icon">
            <img
              src="{% static 'images/ui/wallet-outline.svg' %}"
              style="filter: invert(1)"
              alt="Dashboard"
              width="24"
              height="24"
            />
          </div>
          <span>{% trans "Payroll" %}</span>
        </a>
        <div
          class="oh-sidebar__submenu"
          id="payRollNav"
          x-show="isOpen"
          x-transition
          style="display: none"
        >
          <ul class="oh-sidebar__submenu-items">
            {% if perms.payroll.view_contract %}
            <li class="oh-sidebar__submenu-item">
              <a
                href="{%url 'view-payroll-dashboard' %}"
                class="oh-sidebar__submenu-link"
                >{% trans "Dashboard" %}</a
              >
            </li>
            {%endif%} 
            {% if perms.payroll.view_contract %}
            <li class="oh-sidebar__submenu-item">
              <a
                href="{%url 'view-contract' %}"
                class="oh-sidebar__submenu-link"
                >{% trans "Contract" %}</a
              >
            </li>
            {%endif%} {% if perms.payroll.view_allowance %}
            <li class="oh-sidebar__submenu-item">
              <a
                href="{%url 'view-allowance' %}"
                class="oh-sidebar__submenu-link"
                >{% trans "Allowance view" %}</a
              >
            </li>
            {%endif%} {% if perms.payroll.view_deduction %}
            <li class="oh-sidebar__submenu-item">
              <a
                href="{%url 'view-deduction' %}"
                class="oh-sidebar__submenu-link"
                >{% trans "Deduction view" %}</a
              >
            </li>
            {%endif%}
            <li class="oh-sidebar__submenu-item">
              <a href="{%url 'view-payslip' %}" class="oh-sidebar__submenu-link"
                >{% trans "Payslip" %}</a
              >
            </li>
            {% if perms.payroll.view_loanaccount %}
            <li class="oh-sidebar__submenu-item">
              <a href="{%url 'view-loan' %}" class="oh-sidebar__submenu-link"
                >{% trans "Loan / Advance Salary" %}</a
              >
            </li>
            {% endif %}
            <li class="oh-sidebar__submenu-item">
              <a href="{%url 'view-reimbursement' %}" class="oh-sidebar__submenu-link"
                >{% trans "Encashments & Reimbursements" %}</a
              >
            </li>
            {% if perms.payroll.view_filingstatus %}
            <li class="oh-sidebar__submenu-item">
              <a
                href="{%url 'filing-status-view' %}"
                class="oh-sidebar__submenu-link"
                >{% trans "Federal Tax" %}</a
              >
            </li>
            {%endif%}
          </ul>
        </div>
      </li>
      <li
        class="oh-sidebar__menu-item"
        x-data="{ isOpen: getOpenState('attendanceNav') }"
      >
        <a
          class="oh-sidebar__menu-link"
          data-id="attendanceNav"
          x-on:click.prevent="isOpen = !isOpen; saveOpenState('attendanceNav', isOpen)"
          x-bind:class="isOpen ? 'oh-sidebar__menu-link--active' : ''"
          style="cursor: pointer"
        >
          <div class="oh-sidebar__menu-icon">
            <img
              src="{% static 'images/ui/attendances.svg' %}"
              alt="Dashboard"
              width="24"
              height="24"
            />
          </div>
          <span>{% trans "Attendances" %}</span>
        </a>
        <div
          class="oh-sidebar__submenu"
          id="attendanceNav"
          x-show="isOpen"
          x-transition
          style="display: none"
        >
          <ul class="oh-sidebar__submenu-items">
            {% if perms.attendance.view_attendance or request.user|is_reportingmanager %}
            <li class="oh-sidebar__submenu-item">
              <a
                class="oh-sidebar__submenu-link"
                href="{% url 'attendance-dashboard' %}"
                >{% trans "Dashboard" %}</a
              >
            </li>
            {% endif %}
            {% if perms.attendance.view_attendance or request.user|is_reportingmanager %}
            <li class="oh-sidebar__submenu-item">
              <a
                class="oh-sidebar__submenu-link"
                href="{% url 'attendance-view' %}"
                >{% trans "Attendance" %}</a
              >
            </li>
            {% endif %}
            <li class="oh-sidebar__submenu-item">
              <a
                class="oh-sidebar__submenu-link"
                href="{% url 'request-attendance-view' %}"
                >{% trans "Attendance Requests" %}</a
              >
            </li>
            <li class="oh-sidebar__submenu-item">
              <a
                class="oh-sidebar__submenu-link"
                href="{% url 'attendance-overtime-view' %}"
                >{% trans "Hour Account" %}</a
              >
            </li>
            {% if perms.attendance.view_attendance or request.user|is_reportingmanager %}    
            <li class="oh-sidebar__submenu-item">
              <a
                class="oh-sidebar__submenu-link"
                href="{% url 'work-records' %}"
                >{% trans "Work records" %}</a
              >
            </li>
            {% endif %}
            <li class="oh-sidebar__submenu-item">
              <a
                class="oh-sidebar__submenu-link"
                href="{% url 'attendance-activity-view' %}"
                >{% trans "Attendance Activity" %}</a
              >
            </li>
            <li class="oh-sidebar__submenu-item">
              <a
                class="oh-sidebar__submenu-link"
                href="{% url 'late-come-early-out-view' %}"
                >{% trans "Late Come Early Out" %}</a
              >
            </li>
            <li class="oh-sidebar__submenu-item">
              <a
                class="oh-sidebar__submenu-link"
                href="{% url 'view-my-attendance' %}"
                >{% trans "My Attendance" %}</a
              >
            </li>
          </ul>
        </div>
      </li>
      <li
        class="oh-sidebar__menu-item"
        x-data="{ isOpen: getOpenState('leaveNav') }"
      >
        <a
          class="oh-sidebar__menu-link"
          data-id="leaveNav"
          x-on:click.prevent="isOpen = !isOpen; saveOpenState('leaveNav', isOpen)"
          x-bind:class="isOpen ? 'oh-sidebar__menu-link--active' : ''"
          style="cursor: pointer"
        >
          <div class="oh-sidebar__menu-icon">
            <img
              src="{% static 'images/ui/leave.svg' %}"
              alt="Dashboard"
              width="24"
              height="24"
            />
          </div>
          <span>{% trans "Leave" %}</span>
        </a>
        <div
          class="oh-sidebar__submenu"
          id="leaveNav"
          x-show="isOpen"
          x-transition
          style="display: none"
        >
          <ul class="oh-sidebar__submenu-items">
            {% if perms.leave.view_leaverequest %}
            <li class="oh-sidebar__submenu-item">
              <a
                href="{% url 'leave-dashboard' %}"
                class="oh-sidebar__submenu-link"
                >{% trans "Dashboard" %}</a
              >
            </li>
            {% else %}
            <li class="oh-sidebar__submenu-item">
              <a
                href="{% url 'leave-employee-dashboard' %}?dashboard=true"
                class="oh-sidebar__submenu-link"
                >{% trans "Dashboard" %}</a
              >
            </li>
            {% endif %}

            <li class="oh-sidebar__submenu-item">
              <a
                href="{% url 'user-request-view' %}"
                class="oh-sidebar__submenu-link"
                >{% trans "My Leave Requests" %}</a
              >
            </li>
            <li class="oh-sidebar__submenu-item">
              <a
                href="{% url 'leave-allocation-request-view' %}"
                class="oh-sidebar__submenu-link"
                >{% trans "Leave Allocation Requests" %}</a
              >
            </li>
            {% if perms.leave.view_leavetype %}
            <li class="oh-sidebar__submenu-item">
              <a href="{% url 'type-view' %}" class="oh-sidebar__submenu-link"
                >{% trans "Leave Types" %}</a
              >
            </li>
            {% endif %} {% if perms.leave.view_availableleave or request.user|is_reportingmanager %}
            <li class="oh-sidebar__submenu-item">
              <a href="{% url 'assign-view' %}" class="oh-sidebar__submenu-link"
                >{% trans "Assigned Leaves" %}</a
              >
            </li>
            {% endif %} 
            {% if perms.leave.view_leaverequest or request.user|is_reportingmanager or request.user|is_leave_approval_manager %}
            <li class="oh-sidebar__submenu-item">
              <a
                href="{% url 'request-view' %}"
                class="oh-sidebar__submenu-link"
                >{% trans "Leave Requests" %}</a
              >
            </li>
            {% endif %} 

            <li class="oh-sidebar__submenu-item">
              <a
                href="{% url 'holiday-view' %}"
                class="oh-sidebar__submenu-link"
                >{% trans "Holidays" %}</a
              >
            </li>

            <li class="oh-sidebar__submenu-item">
              <a
                href="{% url 'company-leave-view' %}"
                class="oh-sidebar__submenu-link"
                >{% trans "Company Leaves" %}</a
              >
            </li>

          </ul>
        </div>
      </li>
      <li
        class="oh-sidebar__menu-item"
        x-data="{ isOpen: getOpenState('pmsNav') }"
      >
        <a
          class="oh-sidebar__menu-link"
          data-id="pmsNav"
          x-on:click.prevent="isOpen = !isOpen; saveOpenState('pmsNav', isOpen)"
          x-bind:class="isOpen ? 'oh-sidebar__menu-link--active' : ''"
          style="cursor: pointer"
        >
          <div class="oh-sidebar__menu-icon">
            <img
              src="{% static 'images/ui/pms.svg' %}"
              alt="Dashboard"
              width="24"
              height="24"
            />
          </div>
          <span>{% trans "Performance" %}</span>
        </a>
        <div
          class="oh-sidebar__submenu"
          id="pmsNav"
          x-show="isOpen"
          x-transition
          style="display: none"
        >
          <ul class="oh-sidebar__submenu-items">
            <li class="oh-sidebar__submenu-item">
              <a
                href="{% url 'dashboard-view'  %}"
                class="oh-sidebar__submenu-link"
                >{% trans "Dashboard" %}</a
              >
            </li>
            <li class="oh-sidebar__submenu-item">
              <a
                href="{% url 'objective-list-view' %}"
                class="oh-sidebar__submenu-link"
                >{% trans "Objectives" %}</a
              >
            </li>
            <li class="oh-sidebar__submenu-item">
              <a
                href="{% url 'feedback-view'  %}"
                class="oh-sidebar__submenu-link"
                >{% trans "360 Feedback" %}</a
              >
            </li>
            {% if perms.pms.view_period or request.user|is_reportingmanager %}
            <li class="oh-sidebar__submenu-item">
              <a
                href="{% url 'period-view'  %}"
                class="oh-sidebar__submenu-link"
                >{% trans "Period" %}</a
              >
            </li>
            {% endif %} {% if perms.pms.view_questiontemplate or request.user|is_reportingmanager %}
            <li class="oh-sidebar__submenu-item">
              <a
                href="{% url 'question-template-view'  %}"
                class="oh-sidebar__submenu-link"
                >{% trans "Question Template" %}</a
              >
            </li>
            {% endif %}
          </ul>
        </div>
      </li>
      {% if perms.offboarding.view_offboarding or request.user.employee_get|any_manager or request.user.employee_get|is_offboarding_employee %}
        <li
          class="oh-sidebar__menu-item"
          x-data="{ isOpen: getOpenState('OffboardingNav') }"
        >
          <a
            class="oh-sidebar__menu-link"
            data-id="OffboardingNav"
            x-on:click.prevent="isOpen = !isOpen; saveOpenState('OffboardingNav', isOpen)"
            x-bind:class="isOpen ? 'oh-sidebar__menu-link--active' : ''"
            style="cursor: pointer"
          >
            <div class="oh-sidebar__menu-icon">
              <img
              style="filter: invert(1);"
                src="{% static 'images/ui/exit-outline.svg' %}"
                alt="Dashboard"
                width="24"
                height="24"
              />
            </div>
            <span>{% trans "Offboarding" %}</span>
          </a>
          <div
            class="oh-sidebar__submenu"
            id="OffboardingNav"
            x-show="isOpen"
            x-transition
            style="display: none"
          >
            <ul class="oh-sidebar__submenu-items">
              <li class="oh-sidebar__submenu-item">
                <a
                  href="{% url 'offboarding-pipeline'  %}"
                  class="oh-sidebar__submenu-link"
                  >{% trans "Exist Process" %}</a
                >
              </li>
              {% if perms.offboarding.view_resignationletter and enabled_resignation_request %}
              <li class="oh-sidebar__submenu-item">
                <a
                  href="{% url 'resignation-request-view'  %}"
                  class="oh-sidebar__submenu-link"
                  >{% trans "Resignation Letters" %}</a
                >
              </li>
              {% endif %}
            </ul>
          </div>
        </li>
      {% endif %}

      <li
        class="oh-sidebar__menu-item"
        x-data="{ isOpen: getOpenState('assetNav') }"
      >
        <a
          class="oh-sidebar__menu-link"
          data-id="assetNav"
          x-on:click.prevent="isOpen = !isOpen; saveOpenState('assetNav', isOpen)"
          x-bind:class="isOpen ? 'oh-sidebar__menu-link--active' : ''"
          style="cursor: pointer"
        >
          <div class="oh-sidebar__menu-icon">
            <img
              src="{% static 'images/ui/assets.svg' %}"
              alt="Dashboard"
              width="24"
              height="24"
            />
          </div>
          <span>{% trans "Assets" %}</span>
        </a>
        <div
          class="oh-sidebar__submenu"
          id="assetNav"
          x-show="isOpen"
          x-transition
          style="display: none"
        >
          <ul class="oh-sidebar__submenu-items">
            
            {% if perms.asset.view_assetcategory %}
            <li class="oh-sidebar__submenu-item">
              <a
                href="{%url 'asset-dashboard' %}"
                class="oh-sidebar__submenu-link"
                >{% trans "Dashboard" %}</a
              >
            </li>
            {%endif%}
            {% if perms.asset.view_assetcategory %}
            <li class="oh-sidebar__submenu-item">
              <a
                href="{%url 'asset-category-view' %}"
                class="oh-sidebar__submenu-link"
                >{% trans "Asset view" %}</a
              >
            </li>
            {%endif%}
            <li class="oh-sidebar__submenu-item">
              <a
                href="{%url 'asset-request-allocation-view' %}"
                class="oh-sidebar__submenu-link"
                >{% trans "Request and Allocation" %}</a
              >
            </li>
          </ul>
        </div>
      </li>
      <li
        class="oh-sidebar__menu-item"
        x-data="{ isOpen: getOpenState('helpDeskNav') }"
       >
        <a
          class="oh-sidebar__menu-link"
          data-id="helpDeskNav"
          x-on:click.prevent="isOpen = !isOpen; saveOpenState('helpDeskNav', isOpen)"
          x-bind:class="isOpen ? 'oh-sidebar__menu-link--active' : ''"
          style="cursor: pointer"
        >
          <div class="oh-sidebar__menu-icon">
            <img
              src="{% static 'images/ui/headset-solid.svg' %}"
              alt="Dashboard"
              width="24"
              height="24"
            />
          </div>
          <span>{% trans "Help Desk" %}</span>
        </a>
        <div
          class="oh-sidebar__submenu"
          id="helpDeskNav"
          style="display: none"
          x-show="isOpen"
          x-transition
          style="display: none"
        >
          <ul class="oh-sidebar__submenu-items">
            <li class="oh-sidebar__submenu-item">
              <a
                href="{% url 'faq-category-view' %}"
                class="oh-sidebar__submenu-link"
                >{% trans "FAQs" %}</a
              >
            </li>
            <li class="oh-sidebar__submenu-item">
              <a
                href="{% url 'ticket-view' %}"
                class="oh-sidebar__submenu-link"
                >{% trans "Tickets" %}</a
              >
            </li>
          </ul>
        </div>
      </li>
      {% if perms.Leave.view_leaverequest %}
      <li
        class="oh-sidebar__menu-item"
        x-data="{ isOpen: getOpenState('configNav') }"
       >
        <a
          class="oh-sidebar__menu-link"
          data-id="configNav"
          x-on:click.prevent="isOpen = !isOpen; saveOpenState('configNav', isOpen)"
          x-bind:class="isOpen ? 'oh-sidebar__menu-link--active' : ''"
          style="cursor: pointer"
        >
          <div class="oh-sidebar__menu-icon">
            <svg
              fill="#ffffff"
              height="20"
              width="24"
              version="1.1"
              id="Capa_1"
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              viewBox="0 0 482.568 482.568"
              xml:space="preserve"
              stroke="#ffffff"
            >
              <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
              <g
                id="SVGRepo_tracerCarrier"
                stroke-linecap="round"
                stroke-linejoin="round"
              ></g>
              <g id="SVGRepo_iconCarrier">
                <g>
                  <g>
                    <path
                      d="M116.993,203.218c13.4-1.8,26.8,2.8,36.3,12.3l24,24l22.7-22.6l-32.8-32.7c-5.1-5.1-5.1-13.4,0-18.5s13.4-5.1,18.5,0 l32.8,32.8l22.7-22.6l-24.1-24.1c-9.5-9.5-14.1-23-12.3-36.3c4-30.4-5.7-62.2-29-85.6c-23.8-23.8-56.4-33.4-87.3-28.8 c-4.9,0.7-6.9,6.8-3.4,10.3l30.9,30.9c14.7,14.7,14.7,38.5,0,53.1l-19,19c-14.7,14.7-38.5,14.7-53.1,0l-31-30.9 c-3.5-3.5-9.5-1.5-10.3,3.4c-4.6,30.9,5,63.5,28.8,87.3C54.793,197.518,86.593,207.218,116.993,203.218z"
                    ></path>
                    <path
                      d="M309.193,243.918l-22.7,22.6l134.8,134.8c5.1,5.1,5.1,13.4,0,18.5s-13.4,5.1-18.5,0l-134.8-134.8l-22.7,22.6l138.9,138.9 c17.6,17.6,46.1,17.5,63.7-0.1s17.6-46.1,0.1-63.7L309.193,243.918z"
                    ></path>
                    <path
                      d="M361.293,153.918h59.9l59.9-119.7l-29.9-29.9l-119.8,59.8v59.9l-162.8,162.3l-29.3-29.2l-118,118 c-24.6,24.6-24.6,64.4,0,89s64.4,24.6,89,0l118-118l-29.9-29.9L361.293,153.918z"
                    ></path>
                  </g>
                </g>
              </g>
            </svg>
          </div>
          <span>{% trans "Configuration" %}</span>
        </a>
        <div
          class="oh-sidebar__submenu"
          id="configNav"
          style="display: none"
          x-show="isOpen"
          x-transition
          style="display: none"
          >
          <ul class="oh-sidebar__submenu-items">
            <li class="oh-sidebar__submenu-item">
              <a
                href="{% url 'multiple-approval-condition' %}"
                class="oh-sidebar__submenu-link"
                >{% trans "Multiple Approvals " %}</a
              >
            </li>
          </ul>
        </div>
      </li>
      {% endif %}
    </ul>
  </div>
</div>
<style>
  .highlight-selected{
    background-color: rgba(255, 68, 0, 0.134);
  }
  .highlight-selected:hover{
    background-color: rgba(255, 68, 0, 0.1);
  }
</style>
<script>
  $("#sidebar").mouseover(function (e) {
    e.preventDefault();
    var sidebarContainer = $(".oh-wrapper-main");
    if (sidebarContainer.hasClass("oh-wrapper-main--closed")) {
      sidebarContainer.removeClass("oh-wrapper-main--closed");
    }
  });

  $("#sidebar").mouseleave(function (e) {
    var sidebarContainer = $(".oh-wrapper-main");
    if (sidebarContainer.hasClass("oh-wrapper-main--closed")) {
      sidebarContainer.removeClass("oh-wrapper-main--closed");
    } else {
      if (sidebarContainer.hasClass("toggle-clicked")) {
        sidebarContainer.addClass("oh-wrapper-main--closed");
      }
    }
  });

  $(".oh-sidebar__menu-link").click(function (e) {
    e.preventDefault();
    const currentActiveNav = $(".oh-sidebar__menu-link--active");
    $(currentActiveNav).removeClass("oh-sidebar__menu-link--active");
    const activeSubMenuId = $(currentActiveNav).attr("data-id");
    $(`#${activeSubMenuId}`).attr("style", "display:none;");
    // Get the JSON object from local storage
    const menuStates = JSON.parse(localStorage.getItem("menuStates"));

    // Update the value of a key to false
    menuStates[activeSubMenuId] = false;

    // Save the updated object to local storage
    localStorage.setItem("menuStates", JSON.stringify(menuStates));

    $(this).toggleClass("oh-sidebar__menu-link--active");
    const submenuId = $(this).attr("data-id");
    const submenu = $(`#${submenuId}`);
    if (submenu.attr("style")) {
      submenu.removeAttr("style");
    } else {
      submenu.attr("style", "display:none;");
    }
  });
  function getOpenState(id) {
    const menuStates = JSON.parse(localStorage.getItem("menuStates") || "{}");
    return menuStates[id] || false;
  }

  function saveOpenState(id, isOpen) {
    const menuStates = JSON.parse(localStorage.getItem("menuStates") || "{}");
    menuStates[id] = isOpen;
    localStorage.setItem("menuStates", JSON.stringify(menuStates));
  }

  function getActiveState(id) {
    const activeMenu = JSON.parse(localStorage.getItem("activeMenu") || "{}");
    return activeMenu === id;
  }

  function setActiveState(id) {
    localStorage.setItem("activeMenu", id);
  }

  var message;
  var languageCode = "en";
  var emptyMessages = {
    ar: "...لم يتم العثور على بيانات",
    de: "Keine Daten gefunden...",
    es: "No se encontraron datos...",
    en: "No data Found...",
    fr: "Aucune donnée trouvée...",
  };

  $.ajax({
    type: "GET",
    url: "/employee/get-language-code/",
    success: function (response) {
      languageCode = response.language_code;
      message = emptyMessages[languageCode];
    },
  });

  function emptyChart(chart, args, options) {
    flag = false;
    for (let i = 0; i < chart.data.datasets.length; i++) {
      flag = flag + chart.data.datasets[i].data.some(Boolean);
    }
    if (!flag) {
      const { ctx, canvas } = chart;
      chart.clear();
      const parent = canvas.parentElement;

      // Set canvas width/height to match
      canvas.width = parent.clientWidth;
      canvas.height = parent.clientHeight;
      // Calculate center position
      const x = canvas.width / 2;
      const y = (canvas.height - 70) / 2;
      var noDataImage = new Image();
      noDataImage.src = chart.data.emptyImageSrc
        ? chart.data.emptyImageSrc
        : "/static/images/ui/joiningchart.png";

      message = chart.data.message
        ? chart.data.message
        : emptyMessages[languageCode];

      noDataImage.onload = () => {
        // Draw image first at center
        ctx.drawImage(noDataImage, x - 35, y, 70, 70);

        // Draw text below image
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillStyle = "hsl(0,0%,45%)";
        ctx.font = "16px Poppins";
        ctx.fillText(message, x, y + 70 + 30);
      };
    }
  }

  function highlightRow(checkbox) {
    checkbox.closest(".oh-sticky-table__tr").removeClass("highlight-selected");
    if (checkbox.is(":checked")) {
      checkbox.closest(".oh-sticky-table__tr").addClass("highlight-selected");
    }
  }
  function toggleHighlight(ids) {
    $.each(ids, function (indexInArray, id) {
      setTimeout(() => {
        $(`#${id}`)
          .closest(".oh-sticky-table__tr")
          .removeClass("highlight-selected");
        if ($(`#${id}`).is(":checked")) {
          $(`#${id}`)
            .closest(".oh-sticky-table__tr")
            .addClass("highlight-selected");
        }
      }, 1);
    });
  }
</script>