{# backend/templates/communications/chat_list.html #}
{% extends "base.html" %}
{% load static django_bootstrap5 %}

{% block title %}Мои чаты{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/components/ios-search.css' %}">
<link rel="stylesheet" href="{% static 'css/components/page-header.css' %}">
<link rel="stylesheet" href="{% static 'css/components/document-list.css' %}">
<link rel="stylesheet" href="{% static 'css/components/chat-list-enhanced.css' %}">
{% endblock %}

{% block content %}
<div class="container">
  <div class="row gx-0">
    <div class="col-12">

      {# ===== НОВАЯ ШАПКА С КОМПОНЕНТОМ ===== #}
      {% include "includes/components/page_header.html" with icon="bi-chat-dots" title="Мои чаты" search_id="chatSearch" search_placeholder="Поиск по названию или участникам" create_as_card=True create_modal="chatCreateModal" create_text="Создать чат" %}

      {# ===== ДВУХКОЛОНОЧНАЯ СТРУКТУРА ===== #}
      <div class="d-flex gap-3 chat-list-wrapper">
        
        {# Левая колонка - иконки типов чатов #}
        <div class="chat-type-sidebar">
          <div class="card">
            <div class="list-group list-group-flush">
              <button type="button" class="list-group-item list-group-item-action text-center py-3 chat-type-btn active" 
                      data-chat-type="all" title="Все чаты">
                <i class="bi-chat-dots fs-4 d-block"></i>
                <span class="badge rounded-pill bg-secondary" data-count="all">0</span>
              </button>
              <button type="button" class="list-group-item list-group-item-action text-center py-3 chat-type-btn" 
                      data-chat-type="global" title="Глобальный">
                <i class="bi-globe fs-4 d-block"></i>
                <span class="badge rounded-pill bg-secondary" data-count="global">0</span>
              </button>
              <button type="button" class="list-group-item list-group-item-action text-center py-3 chat-type-btn" 
                      data-chat-type="department" title="Отделы">
                <i class="bi-diagram-3 fs-4 d-block"></i>
                <span class="badge rounded-pill bg-secondary" data-count="department">0</span>
              </button>
              <button type="button" class="list-group-item list-group-item-action text-center py-3 chat-type-btn" 
                      data-chat-type="private" title="Личные">
                <i class="bi-person-fill fs-4 d-block"></i>
                <span class="badge rounded-pill bg-secondary" data-count="private">0</span>
              </button>
              <button type="button" class="list-group-item list-group-item-action text-center py-3 chat-type-btn" 
                      data-chat-type="group" title="Группы">
                <i class="bi-people-fill fs-4 d-block"></i>
                <span class="badge rounded-pill bg-secondary" data-count="group">0</span>
              </button>
              <button type="button" class="list-group-item list-group-item-action text-center py-3 chat-type-btn" 
                      data-chat-type="channel" title="Каналы">
                <i class="bi-broadcast fs-4 d-block"></i>
                <span class="badge rounded-pill bg-secondary" data-count="channel">0</span>
              </button>
              <button type="button" class="list-group-item list-group-item-action text-center py-3 chat-type-btn" 
                      data-chat-type="announcement" title="Объявления">
                <i class="bi-megaphone fs-4 d-block"></i>
                <span class="badge rounded-pill bg-secondary" data-count="announcement">0</span>
              </button>
            </div>
          </div>
        </div>

        {# Правая колонка - список чатов #}
        <div class="chat-list-main flex-grow-1">

      {# ===== 1) ГЛОБАЛЬНЫЙ ===== #}
      <div class="card chat-section mb-3" data-sec="global">
        <div class="card-header">
          <div class="card-icon" style="width:44px;height:44px;"><i class="bi-globe"></i></div>
          <div class="card-meta flex-grow-1">
            <h6 class="mb-0 text-secondary">Глобальный</h6>
            <span class="small text-secondary" data-empty-note style="display:none;">Нет глобального чата</span>
          </div>
        </div>

        <div id="sec-global" class="list-chats">
          {% for chat in chats %}
            {% if chat.type == 'global' %}
              {% with last=chat.last_message.0 %}
              <div class="chat-row d-flex align-items-start gap-2 py-2 px-2"
                  data-chat-id="{{ chat.pk }}"
                  data-type="global"
                  data-last-ts="{% if last %}{{ last.created_at|date:'U' }}000{% else %}{{ chat.created_at|date:'U' }}000{% endif %}"
                  data-haystack="глобальный чат">
                
                {# Аватар или иконка #}
                <div class="card-icon" style="width:44px;height:44px;">
                  {% if chat.avatar %}
                    <img src="{{ chat.avatar.url }}" alt="{{ chat.name }}" class="chat-avatar" loading="lazy">
                  {% else %}
                    <i class="bi-globe"></i>
                  {% endif %}
                </div>
                
                <div class="flex-grow-1 position-relative">
                  <div class="d-flex align-items-center gap-2 flex-wrap">
                    <a href="{% url 'communications:chat_detail' chat.pk %}" class="card-title text-decoration-none stretched-link">
                      {{ chat.name|default:"Глобальный чат" }}
                    </a>
                    <span class="badge bg-light text-dark border">
                      <i class="bi-chat-left-text"></i> {{ chat.messages.count }}
                    </span>
                    <span class="badge bg-danger-subtle text-danger-emphasis border border-danger-subtle {% if not chat.unread_count %}d-none{% endif %}"
                          data-unread>+<span data-unread-count>{{ chat.unread_count|default:0 }}</span></span>
                  </div>
                  <div class="card-subtitle mt-1">
                    {% if last %}
                      <span class="text-secondary">
                        <span data-last-time>{{ last.created_at|date:"d.m.Y H:i" }}</span> ·
                        <strong data-last-author>{{ last.author.get_full_name|default:last.author.username }}</strong>:
                        <span data-last-preview>{{ last.content|default:"(вложение)"|truncatechars:120 }}</span>
                      </span>
                    {% else %}
                      <span class="text-secondary">Сообщений пока нет.</span>
                    {% endif %}
                  </div>
                </div>

                {# Меню действий - Глобальный чат #}
                <div class="chat-actions-menu position-relative" style="z-index:2;">
                  <button class="btn btn-sm btn-link text-secondary p-1" type="button" data-chat-menu-btn data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="bi-three-dots-vertical"></i>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-end">
                    <li><a class="dropdown-item" href="#" data-action="pin"><i class="bi-pin me-2"></i><span data-pin-text>Закрепить</span></a></li>
                    <li><a class="dropdown-item" href="#" data-action="notifications"><i class="bi-bell me-2"></i>Уведомления</a></li>
                  </ul>
                </div>

              </div>
              {% endwith %}
            {% endif %}
          {% endfor %}
        </div>
      </div>

      {# ===== 2) ОТДЕЛЫ ===== #}
      <div class="card chat-section mb-3" data-sec="department">
        <div class="card-header">
          <div class="card-icon" style="width:44px;height:44px;"><i class="bi-diagram-3"></i></div>
          <div class="card-meta flex-grow-1">
            <h6 class="mb-0 text-secondary">Отделы</h6>
            <span class="small text-secondary" data-empty-note style="display:none;">Нет чатов отделов</span>
          </div>
        </div>

        <div id="sec-department" class="list-chats">
          {% for chat in chats %}
            {% if chat.type == 'department' %}
              {% with last=chat.last_message.0 %}
              <div class="chat-row d-flex align-items-start gap-2 py-2 px-2"
                  data-chat-id="{{ chat.pk }}"
                  data-type="department"
                  data-last-ts="{% if last %}{{ last.created_at|date:'U' }}000{% else %}{{ chat.created_at|date:'U' }}000{% endif %}"
                  data-haystack="{{ chat.department.name }}">
                <div class="card-icon" style="width:44px;height:44px;"><i class="bi-diagram-3"></i></div>
                <div class="flex-grow-1 position-relative">
                  <div class="d-flex align-items-center gap-2 flex-wrap">
                    <a href="{% url 'communications:chat_detail' chat.pk %}" class="card-title text-decoration-none stretched-link">
                      Чат отдела: {{ chat.department.name }}
                    </a>
                    <span class="badge bg-light text-dark border">
                      <i class="bi-chat-left-text"></i> {{ chat.messages.count }}
                    </span>
                    <span class="badge bg-danger-subtle text-danger-emphasis border border-danger-subtle {% if not chat.unread_count %}d-none{% endif %}"
                          data-unread>+<span data-unread-count>{{ chat.unread_count|default:0 }}</span></span>
                  </div>
                  <div class="card-subtitle mt-1">
                    {% if last %}
                      <span class="text-secondary">
                        <span data-last-time>{{ last.created_at|date:"d.m.Y H:i" }}</span> ·
                        <strong data-last-author>{{ last.author.get_full_name|default:last.author.username }}</strong>:
                        <span data-last-preview>{{ last.content|default:"(вложение)"|truncatechars:120 }}</span>
                      </span>
                    {% else %}
                      <span class="text-secondary">Сообщений пока нет.</span>
                    {% endif %}
                  </div>
                </div>

                {# Меню действий - Отдел #}
                <div class="chat-actions-menu position-relative" style="z-index:2;">
                  <button class="btn btn-sm btn-link text-secondary p-1" type="button" data-chat-menu-btn data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="bi-three-dots-vertical"></i>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-end">
                    <li><a class="dropdown-item" href="#" data-action="pin"><i class="bi-pin me-2"></i><span data-pin-text>Закрепить</span></a></li>
                    <li><a class="dropdown-item" href="#" data-action="notifications"><i class="bi-bell me-2"></i>Уведомления</a></li>
                  </ul>
                </div>

              </div>
              {% endwith %}
            {% endif %}
          {% endfor %}
        </div>
      </div>

      {# ===== 3) ЛИЧНЫЕ ===== #}
      <div class="card chat-section mb-3" data-sec="private">
        <div class="card-header">
          <div class="card-icon" style="width:44px;height:44px;"><i class="bi-people"></i></div>
          <div class="flex-grow-1 card-meta">
            <h6 class="mb-0 text-secondary">Личные</h6>
            <span class="small text-secondary" data-empty-note style="display:none;">Нет личных чатов</span>
          </div>
        </div>

        <div id="sec-private" class="list-chats">
          {% for chat in chats %}
            {% if chat.type == 'private' %}
              {% with last=chat.last_message.0 %}
              <div class="chat-row d-flex align-items-start gap-2 py-2 px-2"
                  data-chat-id="{{ chat.pk }}"
                  data-type="private"
                  data-last-ts="{% if last %}{{ last.created_at|date:'U' }}000{% else %}{{ chat.created_at|date:'U' }}000{% endif %}"
                  data-haystack="{% for u in chat.participants.all %}{% if u != user %} {{ u.get_full_name|default:u.username }}{% endif %}{% endfor %}">
                <div class="card-icon" style="width:44px;height:44px;">
                  {% with p0=chat.participants.all.0 p1=chat.participants.all.1 %}
                    {% if p0 and p0 != user and p0.avatar %}
                      <img src="{{ p0.avatar.url }}" alt="{{ p0.get_full_name|default:p0.username }}" loading="lazy">
                    {% elif p1 and p1 != user and p1.avatar %}
                      <img src="{{ p1.avatar.url }}" alt="{{ p1.get_full_name|default:p1.username }}" loading="lazy">
                    {% else %}
                      <i class="bi-person"></i>
                    {% endif %}
                  {% endwith %}
                </div>

                <div class="flex-grow-1 position-relative">
                  <div class="d-flex align-items-center gap-2 flex-wrap">
                    <a href="{% url 'communications:chat_detail' chat.pk %}" class="card-title text-decoration-none stretched-link">
                      {% comment %}Показываем имена участников (кроме текущего){% endcomment %}
                      {% for u in chat.participants.all %}{% if u.id != user.id %}{% cycle '' ', ' %}{{ u.get_full_name|default:u.username }}{% endif %}{% endfor %}
                    </a>
                    <span class="badge bg-light text-dark border">
                      <i class="bi-chat-left-text"></i> {{ chat.messages.count }}
                    </span>
                    <span class="badge bg-danger-subtle text-danger-emphasis border border-danger-subtle {% if not chat.unread_count %}d-none{% endif %}"
                          data-unread>+<span data-unread-count>{{ chat.unread_count|default:0 }}</span></span>
                  </div>
                  <div class="card-subtitle mt-1">
                    {% if last %}
                      <span class="text-secondary">
                        <span data-last-time>{{ last.created_at|date:"d.m.Y H:i" }}</span> ·
                        <strong data-last-author>{{ last.author.get_full_name|default:last.author.username }}</strong>:
                        <span data-last-preview>{{ last.content|default:"(вложение)"|truncatechars:120 }}</span>
                      </span>
                    {% else %}
                      <span class="text-secondary">Сообщений пока нет.</span>
                    {% endif %}
                  </div>
                </div>

                {# Меню действий - Личный чат #}
                <div class="chat-actions-menu position-relative" style="z-index:2;">
                  <button class="btn btn-sm btn-link text-secondary p-1" type="button" data-chat-menu-btn data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="bi-three-dots-vertical"></i>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-end">
                    <li><a class="dropdown-item" href="#" data-action="pin"><i class="bi-pin me-2"></i><span data-pin-text>Закрепить</span></a></li>
                    <li><a class="dropdown-item" href="#" data-action="notifications"><i class="bi-bell me-2"></i>Уведомления</a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item text-danger" href="#" data-action="delete"><i class="bi-trash me-2"></i>Удалить</a></li>
                  </ul>
                </div>

              </div>
              {% endwith %}
            {% endif %}
          {% endfor %}
        </div>
      </div>

      {# ===== 4) ГРУППЫ ===== #}
      <div class="card chat-section mb-3" data-sec="group">
        <div class="card-header">
          <div class="card-icon" style="width:44px;height:44px;"><i class="bi-people-fill"></i></div>
          <div class="flex-grow-1 card-meta">
            <h6 class="mb-0 text-secondary">Группы</h6>
            <span class="small text-secondary" data-empty-note style="display:none;">Нет групповых чатов</span>
          </div>
        </div>

        <div id="sec-group" class="list-chats">
          {% for chat in chats %}
            {% if chat.type == 'group' %}
              {% with last=chat.last_message.0 %}
              <div class="chat-row d-flex align-items-start gap-2 py-2 px-2"
                  data-chat-id="{{ chat.pk }}"
                  data-type="group"
                  data-last-ts="{% if last %}{{ last.created_at|date:'U' }}000{% else %}{{ chat.created_at|date:'U' }}000{% endif %}"
                  data-haystack="{{ chat.name }} {{ chat.description }}">
                
                <div class="card-icon" style="width:44px;height:44px;">
                  {% if chat.avatar %}
                    <img src="{{ chat.avatar.url }}" alt="{{ chat.name }}" class="chat-avatar" loading="lazy">
                  {% else %}
                    <i class="bi-people-fill"></i>
                  {% endif %}
                </div>

                <div class="flex-grow-1 position-relative">
                  <div class="d-flex align-items-center gap-2 flex-wrap">
                    <a href="{% url 'communications:chat_detail' chat.pk %}" class="card-title text-decoration-none stretched-link">
                      {{ chat.name }}
                    </a>
                    <span class="badge bg-light text-dark border">
                      <i class="bi-chat-left-text"></i> {{ chat.messages.count }}
                    </span>
                    <span class="badge bg-danger-subtle text-danger-emphasis border border-danger-subtle {% if not chat.unread_count %}d-none{% endif %}"
                          data-unread>+<span data-unread-count>{{ chat.unread_count|default:0 }}</span></span>
                  </div>
                  <div class="card-subtitle mt-1">
                    {% if last %}
                      <span class="text-secondary">
                        <span data-last-time>{{ last.created_at|date:"d.m.Y H:i" }}</span> ·
                        <strong data-last-author>{{ last.author.get_full_name|default:last.author.username }}</strong>:
                        <span data-last-preview>{{ last.content|default:"(вложение)"|truncatechars:120 }}</span>
                      </span>
                    {% else %}
                      <span class="text-secondary">Сообщений пока нет.</span>
                    {% endif %}
                  </div>
                </div>

                {# Меню действий #}
                <div class="chat-actions-menu position-relative" style="z-index:2;">
                  <button class="btn btn-sm btn-link text-secondary p-1" type="button" data-chat-menu-btn data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="bi-three-dots-vertical"></i>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-end">
                    <li><a class="dropdown-item" href="#" data-action="pin"><i class="bi-pin me-2"></i>Закрепить</a></li>
                    <li><a class="dropdown-item" href="#" data-action="notifications"><i class="bi-bell me-2"></i>Уведомления</a></li>
                    <li><a class="dropdown-item" href="#" data-action="edit"><i class="bi-pencil me-2"></i>Редактировать</a></li>
                    <li><a class="dropdown-item" href="#" data-action="manage"><i class="bi-gear me-2"></i>Управление</a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item text-danger" href="#" data-action="delete"><i class="bi-trash me-2"></i>Удалить</a></li>
                  </ul>
                </div>

              </div>
              {% endwith %}
            {% endif %}
          {% endfor %}
        </div>
      </div>

      {# ===== 5) КАНАЛЫ ===== #}
      <div class="card chat-section mb-3" data-sec="channel">
        <div class="card-header">
          <div class="card-icon" style="width:44px;height:44px;"><i class="bi-broadcast"></i></div>
          <div class="flex-grow-1 card-meta">
            <h6 class="mb-0 text-secondary">Каналы</h6>
            <span class="small text-secondary" data-empty-note style="display:none;">Нет каналов</span>
          </div>
        </div>

        <div id="sec-channel" class="list-chats">
          {% for chat in chats %}
            {% if chat.type == 'channel' %}
              {% with last=chat.last_message.0 %}
              <div class="chat-row d-flex align-items-start gap-2 py-2 px-2"
                  data-chat-id="{{ chat.pk }}"
                  data-type="channel"
                  data-last-ts="{% if last %}{{ last.created_at|date:'U' }}000{% else %}{{ chat.created_at|date:'U' }}000{% endif %}"
                  data-haystack="{{ chat.name }} {{ chat.description }}">
                
                <div class="card-icon" style="width:44px;height:44px;">
                  {% if chat.avatar %}
                    <img src="{{ chat.avatar.url }}" alt="{{ chat.name }}" class="chat-avatar" loading="lazy">
                  {% else %}
                    <i class="bi-broadcast"></i>
                  {% endif %}
                </div>

                <div class="flex-grow-1 position-relative">
                  <div class="d-flex align-items-center gap-2 flex-wrap">
                    <a href="{% url 'communications:chat_detail' chat.pk %}" class="card-title text-decoration-none stretched-link">
                      {{ chat.name }}
                    </a>
                    <span class="badge bg-light text-dark border">
                      <i class="bi-chat-left-text"></i> {{ chat.messages.count }}
                    </span>
                    <span class="badge bg-danger-subtle text-danger-emphasis border border-danger-subtle {% if not chat.unread_count %}d-none{% endif %}"
                          data-unread>+<span data-unread-count>{{ chat.unread_count|default:0 }}</span></span>
                  </div>
                  <div class="card-subtitle mt-1">
                    {% if last %}
                      <span class="text-secondary">
                        <span data-last-time>{{ last.created_at|date:"d.m.Y H:i" }}</span> ·
                        <strong data-last-author>{{ last.author.get_full_name|default:last.author.username }}</strong>:
                        <span data-last-preview>{{ last.content|default:"(вложение)"|truncatechars:120 }}</span>
                      </span>
                    {% else %}
                      <span class="text-secondary">Сообщений пока нет.</span>
                    {% endif %}
                  </div>
                </div>

                {# Меню действий #}
                <div class="chat-actions-menu position-relative" style="z-index:2;">
                  <button class="btn btn-sm btn-link text-secondary p-1" type="button" data-chat-menu-btn data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="bi-three-dots-vertical"></i>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-end">
                    <li><a class="dropdown-item" href="#" data-action="pin"><i class="bi-pin me-2"></i>Закрепить</a></li>
                    <li><a class="dropdown-item" href="#" data-action="notifications"><i class="bi-bell me-2"></i>Уведомления</a></li>
                    <li><a class="dropdown-item" href="#" data-action="edit"><i class="bi-pencil me-2"></i>Редактировать</a></li>
                    <li><a class="dropdown-item" href="#" data-action="manage"><i class="bi-gear me-2"></i>Управление</a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item text-danger" href="#" data-action="delete"><i class="bi-trash me-2"></i>Удалить</a></li>
                  </ul>
                </div>

              </div>
              {% endwith %}
            {% endif %}
          {% endfor %}
        </div>
      </div>

      {# ===== 6) ОБЪЯВЛЕНИЯ ===== #}
      <div class="card chat-section mb-3" data-sec="announcement">
        <div class="card-header">
          <div class="card-icon" style="width:44px;height:44px;"><i class="bi-megaphone"></i></div>
          <div class="flex-grow-1 card-meta">
            <h6 class="mb-0 text-secondary">Объявления</h6>
            <span class="small text-secondary" data-empty-note style="display:none;">Нет объявлений</span>
          </div>
        </div>

        <div id="sec-announcement" class="list-chats">
          {% for chat in chats %}
            {% if chat.type == 'announcement' %}
              {% with last=chat.last_message.0 %}
              <div class="chat-row d-flex align-items-start gap-2 py-2 px-2"
                  data-chat-id="{{ chat.pk }}"
                  data-type="announcement"
                  data-last-ts="{% if last %}{{ last.created_at|date:'U' }}000{% else %}{{ chat.created_at|date:'U' }}000{% endif %}"
                  data-haystack="{{ chat.name }} {{ chat.description }}">
                
                <div class="card-icon" style="width:44px;height:44px;">
                  {% if chat.avatar %}
                    <img src="{{ chat.avatar.url }}" alt="{{ chat.name }}" class="chat-avatar" loading="lazy">
                  {% else %}
                    <i class="bi-megaphone"></i>
                  {% endif %}
                </div>

                <div class="flex-grow-1 position-relative">
                  <div class="d-flex align-items-center gap-2 flex-wrap">
                    <a href="{% url 'communications:chat_detail' chat.pk %}" class="card-title text-decoration-none stretched-link">
                      {{ chat.name }}
                    </a>
                    <span class="badge bg-light text-dark border">
                      <i class="bi-chat-left-text"></i> {{ chat.messages.count }}
                    </span>
                    <span class="badge bg-danger-subtle text-danger-emphasis border border-danger-subtle {% if not chat.unread_count %}d-none{% endif %}"
                          data-unread>+<span data-unread-count>{{ chat.unread_count|default:0 }}</span></span>
                  </div>
                  <div class="card-subtitle mt-1">
                    {% if last %}
                      <span class="text-secondary">
                        <span data-last-time>{{ last.created_at|date:"d.m.Y H:i" }}</span> ·
                        <strong data-last-author>{{ last.author.get_full_name|default:last.author.username }}</strong>:
                        <span data-last-preview>{{ last.content|default:"(вложение)"|truncatechars:120 }}</span>
                      </span>
                    {% else %}
                      <span class="text-secondary">Сообщений пока нет.</span>
                    {% endif %}
                  </div>
                </div>

                {# Меню действий #}
                <div class="chat-actions-menu position-relative" style="z-index:2;">
                  <button class="btn btn-sm btn-link text-secondary p-1" type="button" data-chat-menu-btn data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="bi-three-dots-vertical"></i>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-end">
                    <li><a class="dropdown-item" href="#" data-action="pin"><i class="bi-pin me-2"></i>Закрепить</a></li>
                    <li><a class="dropdown-item" href="#" data-action="notifications"><i class="bi-bell me-2"></i>Уведомления</a></li>
                    <li><a class="dropdown-item" href="#" data-action="edit"><i class="bi-pencil me-2"></i>Редактировать</a></li>
                    <li><a class="dropdown-item" href="#" data-action="manage"><i class="bi-gear me-2"></i>Управление</a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item text-danger" href="#" data-action="delete"><i class="bi-trash me-2"></i>Удалить</a></li>
                  </ul>
                </div>

              </div>
              {% endwith %}
            {% endif %}
          {% endfor %}
        </div>
      </div>

      {% if not chats %}
        <div class="alert alert-info shadow-sm mt-3">
          Чатов пока нет. Начните с <a href="{% url 'employees:employees_list' %}" class="text-decoration-none">поиска сотрудника</a>.
        </div>
      {% endif %}

        </div> {# конец chat-list-main #}
      </div> {# конец d-flex #}

    </div>
  </div>
</div>

{# ===== МОДАЛКА СОЗДАНИЯ ЧАТА ===== #}
<div class="modal fade" id="chatCreateModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Создать чат</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
      </div>
      <div class="modal-body">
        
        {# Выбор типа чата #}
        <div class="mb-3">
          <label for="chatTypeSelect" class="form-label">Тип чата</label>
          <select class="form-select" id="chatTypeSelect">
            <option value="private">Личный чат</option>
            <option value="group">Группа</option>
            <option value="channel">Канал</option>
            <option value="announcement">Объявления</option>
          </select>
        </div>

        {# Поля для группы/канала/объявлений #}
        <div id="groupFieldsSection" style="display:none;">
          <div class="mb-3">
            <label for="chatNameInput" class="form-label">Название чата <span class="text-danger">*</span></label>
            <input type="text" class="form-control" id="chatNameInput" placeholder="Введите название">
          </div>
          <div class="mb-3">
            <label for="chatDescInput" class="form-label">Описание</label>
            <textarea class="form-control" id="chatDescInput" rows="3" placeholder="Краткое описание чата"></textarea>
          </div>
        </div>

        {# Выбор участников (для личного чата и группы) #}
        <div id="recipientSection">
          <label class="form-label">Выберите участников</label>
          <div id="chatRecipients" class="recipient-picker" data-api-employees="{% url 'api:v1:employees-list' %}">
            <div class="rp-selected" aria-live="polite"></div>
            <div class="rp-search mb-2">
              <input type="search" class="form-control" placeholder="Найти сотрудника (имя, почта, телефон)">
            </div>
            <div class="rp-results" role="listbox" aria-label="Сотрудники"></div>
          </div>
        </div>

      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" type="button" id="createChatBtn"><i class="bi-check-lg"></i> Создать</button>
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Отмена</button>
      </div>
    </div>
  </div>
</div>

<script type="module">
  import { initSearchFilter } from "{% static 'js/components/searchFilterHandler.js' %}";
  import { RecipientPicker } from "{% static 'js/components/recipientPickerHandler.js' %}";

  // Получаем токен доступа
  const accessMeta = document.querySelector('meta[name="api-access"]');
  const ACCESS = accessMeta ? accessMeta.content : '';
  const headersAuth = ACCESS ? { 'Authorization': 'Bearer ' + ACCESS } : {};

  // Динамически рассчитываем высоту page-header для смещения липкой панели
  const chatListWrapper = document.querySelector('.chat-list-wrapper');

  function updateSidebarOffset() {
    const pageHeader = document.querySelector('.page-header');
    if (!pageHeader) return;

    const headerStyles = window.getComputedStyle(pageHeader);
    const marginBottom = parseFloat(headerStyles.marginBottom) || 0;
    const offset = pageHeader.offsetHeight + marginBottom;

    document.documentElement.style.setProperty('--chat-sidebar-offset', `${offset}px`);
  }

  let resizeTimeout;
  window.addEventListener('resize', () => {
    clearTimeout(resizeTimeout);
    resizeTimeout = setTimeout(updateSidebarOffset, 150);
  });

  updateSidebarOffset();

  // Инициализация RecipientPicker для создания чата
  const chatPicker = new RecipientPicker(
    document.getElementById('chatRecipients'),
    { 
      headers: headersAuth, 
      apiUrl: "{% url 'api:v1:employees-list' %}",
      maxSelections: 1  // По умолчанию для личного чата
    }
  );

  // Переключение типа чата
  const chatTypeSelect = document.getElementById('chatTypeSelect');
  const recipientSection = document.getElementById('recipientSection');
  const groupFieldsSection = document.getElementById('groupFieldsSection');

  chatTypeSelect?.addEventListener('change', function() {
    const type = this.value;
    
    if(type === 'private') {
      recipientSection.style.display = 'block';
      groupFieldsSection.style.display = 'none';
      chatPicker.setMaxSelections(1);
    } else if(type === 'group') {
      recipientSection.style.display = 'block';
      groupFieldsSection.style.display = 'block';
      chatPicker.setMaxSelections(100);
    } else {
      // channel, announcement - только название/описание
      recipientSection.style.display = 'none';
      groupFieldsSection.style.display = 'block';
    }
  });

  // Функция получения CSRF токена
  function getCSRFToken() {
    // Сначала пробуем найти в скрытом поле формы
    const tokenInput = document.querySelector('[name=csrfmiddlewaretoken]');
    if (tokenInput) {
      return tokenInput.value;
    }
    
    // Иначе берем из cookie
    const name = 'csrftoken';
    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;
  }

  // Обработка создания чата
  document.getElementById('createChatBtn')?.addEventListener('click', async () => {
    const type = chatTypeSelect.value;
    const csrftoken = getCSRFToken();

    if(type === 'private') {
      // Создание личного чата
      const selected = chatPicker.getSelected();
      if (selected.length === 0) {
        alert('Выберите сотрудника для чата');
        return;
      }
      
      const employeeId = selected[0].id;
      window.location.href = "{% url 'communications:start_private_chat' 0 %}".replace('/0/', `/${employeeId}/`);
    } else {
      // Создание group/channel/announcement через API
      const nameInput = document.getElementById('chatNameInput');
      const descInput = document.getElementById('chatDescInput');
      const name = nameInput?.value.trim() || '';
      const description = descInput?.value.trim() || '';

      if(!name) {
        alert('Введите название чата');
        return;
      }

      // Собираем participant_ids для группового чата
      let participant_ids = [];
      if(type === 'group') {
        const selected = chatPicker.getSelected();
        participant_ids = selected.map(s => s.id);
      }

      const res = await fetch('/communications/api/chat/create/', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRFToken': csrftoken
        },
        body: JSON.stringify({
          type: type,
          name: name,
          description: description,
          participant_ids: participant_ids
        })
      });

      if(res.ok) {
        const data = await res.json();
        window.location.href = `/communications/chats/${data.chat_id}/`;
      } else {
        const err = await res.json();
        alert('Ошибка: ' + (err.error || 'Неизвестная ошибка'));
      }
    }
  });
  
  // Инициализация поиска и фильтрации
  const filterApi = initSearchFilter({
    inputId: 'chatSearch',
    clearSelector: '.ios-search-clear',
    sectionSelector: '.chat-section',
    rowSelector: '.chat-row'
  });

  // ===== ФИЛЬТРАЦИЯ ПО ТИПАМ ЧАТОВ =====
  let activeFilter = 'all';
  
  const chatTypeButtons = document.querySelectorAll('.chat-type-btn');
  const chatSections = document.querySelectorAll('.chat-section');
  
  // Функция подсчета чатов по типам и управления видимостью
  function updateChatCounts() {
    const counts = {
      all: 0,
      global: 0,
      department: 0,
      private: 0,
      group: 0,
      channel: 0,
      announcement: 0
    };
    
    // Подсчитываем чаты в каждой секции
    chatSections.forEach(section => {
      const sectionType = section.dataset.sec;
      const chatRows = section.querySelectorAll('.chat-row');
      
      // Считаем только видимые (не скрытые поиском) чаты
      const visibleChats = Array.from(chatRows).filter(row => {
        return row.style.display !== 'none';
      }).length;
      
      counts[sectionType] = visibleChats;
      counts.all += visibleChats;
      
      // Управление видимостью секции
      // 1. Если чатов нет (скрыты поиском или отсутствуют) -> скрываем секцию
      if (visibleChats === 0) {
        section.style.display = 'none';
      } 
      // 2. Если чаты есть, проверяем активный фильтр
      else {
        if (activeFilter === 'all' || activeFilter === sectionType) {
          section.style.display = '';
        } else {
          section.style.display = 'none';
        }
      }
    });
    
    // Обновляем бейджи и кнопки
    Object.keys(counts).forEach(type => {
      const badge = document.querySelector(`[data-count="${type}"]`);
      const button = document.querySelector(`[data-chat-type="${type}"]`);
      
      if (badge) {
        badge.textContent = counts[type];
        // Скрываем бейдж если 0
        badge.style.display = counts[type] === 0 ? 'none' : '';
      }
      
      // Скрываем кнопку категории, если в ней нет чатов (кроме 'all')
      if (button && type !== 'all') {
        button.style.display = counts[type] === 0 ? 'none' : '';
      }
    });
  }
  
  function applyTypeFilter(filterType) {
    activeFilter = filterType;
    
    // Обновляем активную кнопку
    chatTypeButtons.forEach(btn => {
      if (btn.dataset.chatType === filterType) {
        btn.classList.add('active');
      } else {
        btn.classList.remove('active');
      }
    });
    
    // Переприменяем поиск (если есть), это обновит видимость строк
    if (filterApi && filterApi.reapply) {
      filterApi.reapply();
    }
    
    // Обновляем видимость секций и счетчики
    updateChatCounts();
  }
  
  // Обработка кликов по кнопкам типов
  chatTypeButtons.forEach(btn => {
    btn.addEventListener('click', () => {
      const filterType = btn.dataset.chatType;
      applyTypeFilter(filterType);
    });
  });
  
  // Применяем начальный фильтр и подсчитываем чаты
  applyTypeFilter('all');
  
  // Обновляем счетчики после поиска
  const searchInput = document.getElementById('chatSearch');
  if (searchInput) {
    searchInput.addEventListener('input', () => {
      setTimeout(updateChatCounts, 100);
    });
  }
</script>

{# Подключаем chat-list-enhanced.js для WebSocket и контекстного меню #}
<script src="{% static 'js/chat-list-enhanced.js' %}"></script>
{% endblock %}