{% load static req_tags %}

<link rel="stylesheet" href="{% static 'css/components/sidebar.css' %}">

<div id="sidebar"
     class="offcanvas offcanvas-start offcanvas-lg"
     tabindex="-1" aria-labelledby="sidebarLabel"
     data-bs-backdrop="false" data-bs-scroll="true">

  <div class="offcanvas-header border-bottom d-lg-none">
    <h5 class="offcanvas-title" id="sidebarLabel">Меню</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Закрыть"></button>
  </div>

  <div class="offcanvas-body d-flex flex-column h-100 px-0">
    <nav class="side-nav">
      <a href="{% url 'feed:feed_list' %}"
        class="nav-link {% if request.resolver_match.url_name == 'feed_list' %}active{% endif %}"
        {% if request.resolver_match.url_name == 'feed_list' %}aria-current="page"{% endif %}>
        <span class="side-icon"><i class="bi-megaphone"></i></span>
        <span>Новости</span>
      </a>
      <a href="{% url 'employees:employees_list' %}"
        class="nav-link {% if request.resolver_match.url_name == 'employees_list' %}active{% endif %}"
        {% if request.resolver_match.url_name == 'employees_list' %}aria-current="page"{% endif %}>
        <span class="side-icon"><i class="bi-people"></i></span>
        <span>Сотрудники</span>
      </a>
      <a href="{% url 'employees:department_list' %}"
        class="nav-link {% if request.resolver_match.url_name == 'department_list' %}active{% endif %}"
        {% if request.resolver_match.url_name == 'department_list' %}aria-current="page"{% endif %}>
        <span class="side-icon"><i class="bi-diagram-3"></i></span>
        <span>Отделы</span>
      </a>
      <a href="{% url 'requests:request_list' %}"
        class="nav-link {% if request.resolver_match.url_name == 'request_list' %}active{% endif %}"
        {% if request.resolver_match.url_name == 'request_list' %}aria-current="page"{% endif %}>
        <span class="side-icon"><i class="bi-clipboard-check"></i></span>
        <span>Заявления</span>
      </a>
      
      {% with total=chat_unread_total|default:0 %}
      <a href="{% url 'communications:chat_list' %}"
        class="nav-link {% if request.resolver_match.app_name == 'communications' %}active{% endif %}"
        {% if request.resolver_match.app_name == 'communications' %}aria-current="page"{% endif %}
        aria-label="Чаты{% if total|add:0 > 0 %}, непрочитанных {{ total }}{% endif %}">
        <span class="side-icon icon-wrap">
          <i class="bi-chat-dots"></i>
          {% if total|add:0 > 0 %}
            <span class="nav-unread" id="sidebarChatBadge" data-count="{{ total }}">{{ total }}</span>
          {% else %}
            <span class="nav-unread d-none" id="sidebarChatBadge" data-count="0">0</span>
          {% endif %}
        </span>
        <span>Чаты</span>
      </a>
      {% endwith %}
      <a href="{% url 'documents:document_list' %}"
        class="nav-link {% if request.resolver_match.url_name == 'document_list' %}active{% endif %}"
        {% if request.resolver_match.url_name == 'document_list' %}aria-current="page"{% endif %}>
        <span class="side-icon"><i class="bi-file-earmark-text"></i></span>
        <span>Документы</span>
      </a>
      
      <a href="{% url 'finance:dashboard' %}"
        class="nav-link {% if request.resolver_match.app_name == 'finance' %}active{% endif %}"
        {% if request.resolver_match.app_name == 'finance' %}aria-current="page"{% endif %}>
        <span class="side-icon"><i class="bi-cash-coin"></i></span>
        <span>Финансы</span>
      </a>
      
    </nav>

    <div class="mt-auto pt-3 small">
      <button type="button" class="btn-theme js-theme-btn" id="themeBtnSidebar"
              aria-label="Сменить тему" title="Сменить тему">
        <i class="bi bi-circle-half" aria-hidden="true"></i>
      </button>
    </div>


  </div>

</div>

<script type="module">
  import { initChatBadge } from "{% static 'js/components/chatBadgeHandler.js' %}";
  import { initThemeToggle } from "{% static 'js/components/themeToggleHandler.js' %}";

  // Инициализация бейджа непрочитанных чатов
  initChatBadge({ badgeId: 'sidebarChatBadge' });

  // Инициализация переключателя темы
  initThemeToggle();
</script>