{# backend/templates/employees/department_detail.html #}
{% extends 'base.html' %}
{% load static django_bootstrap5 %}

{% block title %}{{ dept.name }}{% endblock %}

{% block content %}
{% with dept_id=dept.id %}
<div class="container">

  {# ===== Заголовок ===== #}
  <div class="ios-header feed-header d-flex align-items-center gap-2 flex-wrap">
    <i class="bi-diagram-3 fs-2 text-primary"></i>
    <h2 class="title ios-title mb-0">{{ dept.name }}</h2>
    {% if user.is_staff or user.is_superuser or can_manage or dept.head.id == user.id %}
    <div class="ms-2 header-icon-group d-inline-flex align-items-center gap-2">

      {# Добавить участника #}
      <button type="button"
              class="btn-icon btn-icon--success"
              data-bs-toggle="modal"
              data-bs-target="#addMemberModal-{{ dept.id }}"
              data-bs-toggle="tooltip"
              title="Добавить участника"
              aria-label="Добавить участника">
        <i class="bi-person-plus" aria-hidden="true"></i>
      </button>

      {# Назначить роль #}
      {% if roles %}
        {% if user.is_superuser or user.is_staff or can_assign_roles or dept.head.id == user.id %}
          <button type="button"
                  class="btn-icon btn-icon--primary"
                  data-bs-toggle="modal"
                  data-bs-target="#setRoleModal-{{ dept.id }}"
                  data-bs-toggle="tooltip"
                  title="Назначить роль"
                  aria-label="Назначить роль">
            <i class="bi-award" aria-hidden="true"></i>
          </button>
        {% endif %}
      {% endif %}

      {# Удалить участника #}
      <button type="button"
              class="btn-icon btn-icon--danger"
              data-bs-toggle="modal"
              data-bs-target="#removeMemberModal-{{ dept.id }}"
              data-bs-toggle="tooltip"
              title="Удалить участника"
              aria-label="Удалить участника">
        <i class="bi-person-dash" aria-hidden="true"></i>
      </button>

    </div>
    {% endif %}

    <div class="ms-auto d-flex gap-2">
      {% url 'feed:post_create' as post_create_url %}
      {% if user.is_authenticated and user.id in members_exclude_ids %}
        <a href="{{ post_create_url }}?department={{ dept_id }}&next={{ request.get_full_path|urlencode }}"
            class="btn btn-primary">
          <i class="bi-plus-circle me-1"></i> Создать публикацию
        </a>
      {% endif %}

      
    </div>
  </div>

  {# ===== Две колонки как в employee_detail: слева основное, справа сайдбар ===== #}
  <div class="row g-4 align-items-start">

    {# ===== ЛЕВАЯ КОЛОНКА (основная, как в профиле): команда + инфо ===== #}
    <div class="col-md-4">
      {# --- Команда отдела (круг) --- #}
      <section class="feed-card mb-3">
        <div class="feed-hd">
          
          <i class="bi-people"></i>
          <div class="feed-meta">
            <div class="feed-author">{% url 'employees:employees_list' as employees_list_url %}
      {% if employees_list_url %}
        <a class="feed-author"
           href="{{ employees_list_url }}?department={{ dept_id }}">
          Команда отдела →
        </a>
      {% endif %} </div>
          </div>
        </div>
        
        <div class="feed-body d-flex flex-column align-items-center">
          <div class="team-wrap d-flex flex-column align-items-center">

            {# КРУГ #}
            <div id="teamWheel-{{ dept.id }}" class="team-wheel"
                 aria-live="polite"
                 aria-label="Сотрудники отдела (скролл)">
              <div class="wheel-plane" data-plane>
                <div class="wheel-columns" data-columns>
                  <div class="wheel-col col-1" data-col="1"></div>
                  <div class="wheel-col col-2" data-col="2"></div>
                  <div class="wheel-col col-3" data-col="3"></div>
                  <div class="wheel-col col-4" data-col="4"></div>
                </div>
              </div>

              {# Слой фокуса #}
              <div class="wheel-focus d-none" data-focus>
                <div class="focus-inner">
                  <img alt="" data-focus-img>
                  <i class="bi-person" data-focus-fallback></i>
                </div>
              </div>

              {# ПОЛУКРУЖНЫЙ ИНДИКАТОР СКРОЛЛА (справа по дуге) #}
              <svg class="scroll-arc" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
                <path class="arc-track" d="M 50 2 A 48 48 0 0 1 50 98"></path>
                <path class="arc-prog"  d="M 50 2 A 48 48 0 0 1 50 98" pathLength="1"></path>
              </svg>
            </div>

            {# Источник данных для круга #}
            <div id="teamData-{{ dept.id }}" class="d-none" data-team-source>
              {% for li in links %}
                {% with emp=li.employee %}
                  <div
                    data-id="{{ emp.id }}"
                    data-name="{{ emp.display_name|default:emp.last_name }}"
                    data-role="{{ li.role.name|default:'' }}"
                    data-email="{{ emp.email|default:'' }}"
                    data-avatar="{{ emp.avatar|default:'' }}"
                    data-active="{{ li.is_active|yesno:'1,0' }}"
                  ></div>
                {% endwith %}
              {% empty %}
              {% endfor %}
            </div>

            {# Текст под кругом #}
            <div class="mt-2 text-center w-100 d-flex flex-column align-items-center">
              <div class="team-info d-none mt-1" data-details>
                <div class="fw-semibold" data-details-name></div>
                <div class="text-secondary small" data-details-role></div>
                <div class="small" data-details-email></div>
              </div>
            </div>

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

      {# --- Инфо-блок отдела (под командой) --- #}
      {% if dept.description or dept.head %}
        <section class="feed-card mb-3">
          <div class="feed-body position-relative pb-4 pe-3 pt-0">
            {% if dept.description %}
              <div class="text-break" style="white-space: pre-line; overflow-wrap:anywhere;">
                {{ dept.description }}
              </div>
            {% endif %}

            {% if dept.head %}
              <div class="small mt-2">
                <span class="text-secondary">Руководитель:</span>
                {% url 'employees:employee_detail' dept.head.id as head_url %}
                {% if head_url %}
                  <a class="text-decoration-none" href="{{ head_url }}">
                    {{ dept.head.last_name }}{% if dept.head.first_name %} {{ dept.head.first_name }}{% endif %}
                  </a>
                {% else %}
                  {{ dept.head.last_name }}{% if dept.head.first_name %} {{ dept.head.first_name }}{% endif %}
                {% endif %}
              </div>
            {% endif %}

            {% if user.is_staff or dept.head.id == user.id or can_manage or can_assign_roles or can_change_head %}
              <button
                type="button"
                class="position-absolute p-0 bg-transparent border-0 text-secondary"
                style="right:.5rem; bottom:.5rem;"
                data-bs-toggle="collapse"
                data-bs-target="#deptEditWrap-{{ dept.id }}"
                aria-controls="deptEditWrap-{{ dept.id }}"
                title="Настройки отдела"
                aria-label="Показать/скрыть настройки отдела">
                <i class="bi-gear fs-5"></i>
              </button>
            {% endif %}
          </div>
        </section>
      {% endif %}

    </div>

    {# ===== ПРАВАЯ КОЛОНКА (сайдбар): публикации/активность ===== #}
    <div class="col-md-8">
      {% if user.is_staff or user.is_superuser or can_manage or dept.head.id == user.id %}
        <div id="deptEditWrap-{{ dept.id }}" class="collapse mb-4">
          <article class="feed-card mb-3">
            <div class="p-4">
              <div class="d-flex align-items-center gap-2">
                <i class="bi-gear"></i>
                <div class="ios-section-title mb-0">Настройки отдела</div>
                <div class="ms-auto">
                  <button type="button" class="btn btn-sm btn-ghost"
                          data-bs-toggle="collapse" data-bs-target="#deptEditWrap-{{ dept.id }}">
                    Скрыть
                  </button>
                </div>
              </div>

              <div class="mt-3">
                {% include "employees/_department_controls.html" with dept=dept edit_form=edit_form head_choices=head_choices %}
              </div>
            </div>
          </article>
        </div>
      {% endif %}
      <section class="feed-card mb-3">
        <div class="feed-hd">
          <i class="bi-newspaper"></i>
          <div class="feed-meta">
            <div class="feed-author">Публикации отдела</div>
          </div>
        </div>
        <div>
          {% if posts %}
            {% include "feed/_feed_cards.html" with items=posts  %}
          {% else %}
            <div class="text-secondary small">Публикаций пока нет.</div>
          {% endif %}
        </div>
      </section>

      {# Простая пагинация (если нужно) #}
      {% if page|default:0 %}
        <div>
          {% if page|add:"-1" %}
            <a class="btn btn-outline-secondary btn-sm" href="?page={{ page|add:'-1' }}">← Назад</a>
          {% endif %}
        </div>
      {% endif %}
    </div>

  </div>
</div>

{# ---------- МОДАЛ «Удалить участника» ---------- #}
{% if user.is_staff or user.is_superuser or can_manage or dept.head.id == user.id %}
  <div class="modal fade" id="removeMemberModal-{{ dept.id }}" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title"><i class="bi-person-dash me-2"></i>Удалить участника</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
        </div>

        <form method="post" action="{% url 'employees:department_remove_member' dept.id %}">
          {% csrf_token %}
          <input type="hidden" name="employee_id" id="removeMemberChosen-{{ dept.id }}">
          <input type="hidden" name="member_id"   id="removeMemberLink-{{ dept.id }}">

          <div class="modal-body">
            <div class="mb-3">
              <input id="removeMemberSearch-{{ dept.id }}" type="search"
                     class="form-control" placeholder="Поиск по ФИО или email" autocomplete="off">
              <div class="form-text">Отображаются участники этого отдела.</div>
            </div>

            <div id="removeMemberResults-{{ dept.id }}"
                 class="list-group list-group-flush border rounded">
              {% for li in links %}
                {% with emp=li.employee %}
                  <button type="button"
                          class="list-group-item list-group-item-action d-flex align-items-center gap-2 py-2"
                          data-id="{{ emp.id }}"
                          data-link-id="{{ li.id }}"
                          data-name="{{ emp.display_name|default:emp.last_name }}"
                          data-email="{{ emp.email|default:'' }}">
                    <span class="feed-ava"
                          style="width:32px;height:32px;flex:0 0 32px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;">
                      {% if emp.avatar %}<img src="{{ emp.avatar }}" alt="" style="width:100%;height:100%;object-fit:cover;">{% else %}<i class="bi-person"></i>{% endif %}
                    </span>
                    <span class="d-flex flex-column text-start">
                      <span class="fw-semibold">{{ emp.display_name|default:emp.last_name }}</span>
                      {% if emp.email %}<span class="text-muted small">{{ emp.email }}</span>{% endif %}
                    </span>
                  </button>
                {% endwith %}
              {% empty %}
                <div class="list-group-item text-secondary small py-3">В отделе пока нет участников.</div>
              {% endfor %}
            </div>
          </div>

          <div class="modal-footer">
            <button type="button" class="btn btn-link" data-bs-dismiss="modal">
              <i class="bi-x-lg me-1"></i>Отмена
            </button>
            <button type="submit" id="removeMemberSubmit-{{ dept.id }}" class="btn btn-outline-danger" disabled>
              <i class="bi-person-dash me-1"></i>Удалить
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
{% endif %}

{# ---------- МОДАЛ «Добавить участника» ---------- #}
{% if user.is_staff or user.is_superuser or can_manage or dept.head.id == user.id %}
  {% with exclude_ids=members_exclude_ids %}
  <div class="modal fade" id="addMemberModal-{{ dept.id }}" tabindex="-1" aria-hidden="true"
       data-exclude="{% if exclude_ids %}{{ exclude_ids|join:',' }}{% endif %}">
    <div class="modal-dialog modal-dialog-centered modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title"><i class="bi-person-plus me-2"></i>Добавить участника</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
        </div>

        <form method="post" action="{% url 'employees:department_add_member' dept.id %}">
          {% csrf_token %}
          <input type="hidden" name="employee_id" id="addMemberChosen-{{ dept.id }}">

          <div class="modal-body">
            <div class="mb-3">
              <input id="addMemberSearch-{{ dept.id }}" type="search"
                     class="form-control" placeholder="Поиск по ФИО или email" autocomplete="off"
                     data-add-member-q>
              <div class="form-text">Показываются только те, кто ещё не состоит в отделе.</div>
            </div>

            <div id="addMemberResults-{{ dept.id }}" class="list-group list-group-flush border rounded"
                 data-add-member-list>
              <div class="list-group-item text-muted small py-3">Начните вводить для поиска…</div>
            </div>

            <template id="addMemberItemTpl-{{ dept.id }}">
              <button type="button" class="list-group-item list-group-item-action d-flex align-items-center gap-2 py-2" data-id="">
                <span class="feed-ava" style="width:32px;height:32px;flex:0 0 32px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;">
                  <i class="bi-person"></i>
                </span>
                <span class="d-flex flex-column text-start">
                  <span class="fw-semibold js-name"></span>
                  <span class="text-muted small js-email"></span>
                </span>
              </button>
            </template>
          </div>

          <div class="modal-footer">
            <button type="button" class="btn btn-link" data-bs-dismiss="modal">
              <i class="bi-x-lg me-1"></i>Отмена
            </button>
            <button type="submit" id="addMemberSubmit-{{ dept.id }}" class="btn btn-success"
                    data-add-member-submit disabled>
              <i class="bi-person-plus me-1"></i>Добавить
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
  {% endwith %}
{% endif %}

{# ---------- МОДАЛ «Назначить роль» ---------- #}
{% if roles %}
  {% if user.is_superuser or user.is_staff or can_assign_roles or dept.head.id == user.id %}
    <div class="modal fade" id="setRoleModal-{{ dept.id }}" tabindex="-1" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title"><i class="bi-award me-2"></i>Назначить роль</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
          </div>

          {# порядок аргументов: emp_id, dept_id #}
          <form method="post"
                action="{% url 'employees:set_member_role' 0 dept.id %}"
                data-action-template="{% url 'employees:set_member_role' 0 dept.id %}">
            {% csrf_token %}
            <input type="hidden" name="next" value="{{ request.get_full_path }}">
            <input type="hidden" name="employee_id" id="setRoleChosen-{{ dept.id }}">

            <div class="modal-body">
              <div class="row g-3">
                <div class="col-md-6">
                  <label for="setRoleSearch-{{ dept.id }}" class="form-label">Участник</label>
                  <input id="setRoleSearch-{{ dept.id }}" type="search"
                         class="form-control" placeholder="Поиск по ФИО или email" autocomplete="off">
                  <div id="setRoleResults-{{ dept.id }}"
                       class="list-group list-group-flush border rounded mt-2" style="max-height:320px;overflow:auto;">
                    {% for li in links %}
                      {% with emp=li.employee %}
                        <button type="button"
                                class="list-group-item list-group-item-action d-flex align-items-center gap-2 py-2"
                                data-id="{{ emp.id }}"
                                data-name="{{ emp.display_name|default:emp.last_name }}"
                                data-email="{{ emp.email|default:'' }}">
                          <span class="feed-ava"
                                style="width:32px;height:32px;flex:0 0 32px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;">
                            {% if emp.avatar %}<img src="{{ emp.avatar }}" alt="" style="width:100%;height:100%;object-fit:cover;">{% else %}<i class="bi-person"></i>{% endif %}
                          </span>
                          <span class="d-flex flex-column text-start">
                            <span class="fw-semibold">{{ emp.display_name|default:emp.last_name }}</span>
                            {% if emp.email %}<span class="text-muted small">{{ emp.email }}</span>{% endif %}
                          </span>
                        </button>
                      {% endwith %}
                    {% empty %}
                      <div class="list-group-item text-secondary small py-3">В отделе пока нет участников.</div>
                    {% endfor %}
                  </div>
                </div>
                <div class="col-md-6">
                  <label for="setRoleSelect-{{ dept.id }}" class="form-label">Роль</label>
                  <select name="role_id" id="setRoleSelect-{{ dept.id }}" class="form-select">
                    <option value="">— Без роли —</option>
                    {% for r in roles %}
                      <option value="{{ r.id }}">{{ r.name }}</option>
                    {% endfor %}
                  </select>
                  <div class="form-text">Выберите участника слева и роль здесь.</div>
                </div>
              </div>
            </div>

            <div class="modal-footer">
              <button type="button" class="btn btn-link" data-bs-dismiss="modal">
                <i class="bi-x-lg me-1"></i>Отмена
              </button>
              <button type="submit" id="setRoleSubmit-{{ dept.id }}" class="btn btn-primary" disabled>
                <i class="bi-check2 me-1"></i>Сохранить
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  {% endif %}
{% endif %}

{% endwith %}
{% endblock %}

{% block extra_js %}

{% url 'employees:employees_list' as employees_list_url %}

{# ==== СТИЛИ (можно вынести в base.html, чтобы не дублировать) ==== #}
<style>
  :root{
    --wheel-size: 200px;      /* размер круга */
    --ava-size: 52px;         /* размер мини-аватарки */
    --ring-bg: radial-gradient(ellipse at center, var(--bs-body-bg), color-mix(in srgb, var(--bs-body-bg) 85%, var(--bs-secondary-bg, #f7f7f9) 15%));
    --ring-border: var(--bs-border-color, rgba(0,0,0,.125));
    --shadow-inset: 0 8px 24px rgba(0,0,0,.06) inset;
    --shadow-out: 0 4px 12px rgba(0,0,0,.05);
    --arc-width: 4px;
    --arc-track: color-mix(in srgb, var(--bs-secondary-color) 30%, transparent);
    --arc-prog: var(--bs-primary);
  }

  .team-wrap{ width: var(--wheel-size); display:flex; flex-direction:column; align-items:center; margin-inline:auto; }

  .team-wheel{
    position: relative;
    width: var(--wheel-size);
    height: var(--wheel-size);
    border-radius: 50%;
    overflow: hidden;
    background: var(--ring-bg);
    border: 1px solid var(--ring-border);
    box-shadow: var(--shadow-inset);
    user-select: none;
    touch-action: none;
    display:flex; align-items:center; justify-content:center;
  }

  .wheel-plane{ position:absolute; inset:0; }
  .wheel-columns{
    position:absolute; inset:10px 8px;
    display:flex; gap:8px; justify-content:space-between; align-items:flex-start;
    will-change: transform;
  }
  .wheel-col{ width: calc(25% - 6px); display:flex; flex-direction:column; gap:8px; align-items:center; }
  .wheel-col.col-2{ margin-top: calc(var(--ava-size) * .5); }
  .wheel-col.col-3{ margin-top: calc(var(--ava-size) * 1.0); }
  .wheel-col.col-4{ margin-top: calc(var(--ava-size) * 1.5); }

  .wheel-item{ background:transparent; border:0; padding:0; width:var(--ava-size); height:var(--ava-size); border-radius:50%; cursor:pointer; box-shadow: var(--shadow-out); }
  .wheel-item .ava{ width:100%; height:100%; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; background: color-mix(in srgb, var(--bs-body-bg) 75%, #f0f0f3 25%); }
  .wheel-item .ava img{ width:100%; height:100%; object-fit:cover; display:block; }
  .wheel-item .ava i{ font-size: calc(var(--ava-size) * .55); color: var(--bs-secondary-color); }

  .wheel-focus{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background: var(--bs-body-bg); }
  .wheel-focus .focus-inner{ width:100%; height:100%; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; background: color-mix(in srgb, var(--bs-body-bg) 85%, #e9ecef 15%); }
  .wheel-focus img{ width:100%; height:100%; object-fit:cover; display:none; }
  .wheel-focus [data-focus-fallback]{ display:none; font-size: calc(var(--wheel-size) * .35); color: var(--bs-secondary-color); }

  .scroll-arc{ position:absolute; inset:0; pointer-events:none; }
  .arc-track{ fill:none; stroke: var(--arc-track); stroke-width: var(--arc-width); stroke-linecap: round; }
  .arc-prog{ fill:none; stroke: var(--arc-prog); stroke-width: var(--arc-width); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .12s linear; }

  .team-info{ text-align:center; }
</style>

{# ==== JS: круг с автоскроллом/ручным управлением и индикатором ==== #}
<script>
(function(){
  const wheel = document.getElementById('teamWheel-{{ dept.id }}');
  if (!wheel) return;

  const columns = wheel.querySelector('[data-columns]');
  const col1 = columns.querySelector('[data-col="1"]');
  const col2 = columns.querySelector('[data-col="2"]');
  const col3 = columns.querySelector('[data-col="3"]');
  const col4 = columns.querySelector('[data-col="4"]');

  const focus     = wheel.querySelector('[data-focus]');
  const fImg      = wheel.querySelector('[data-focus-img]');
  const fFallback = wheel.querySelector('[data-focus-fallback]');

  const wrapper  = wheel.closest('.team-wrap');
  const hintBox  = wrapper ? wrapper.querySelector('[data-hint]') : null;
  const details  = wrapper ? wrapper.querySelector('[data-details]') : null;
  const dName    = wrapper ? wrapper.querySelector('[data-details-name]') : null;
  const dRole    = wrapper ? wrapper.querySelector('[data-details-role]') : null;
  const dMail    = wrapper ? wrapper.querySelector('[data-details-email]') : null;

  const arcProg = wheel.querySelector('.arc-prog');

  // Источник данных
  const src = document.getElementById('teamData-{{ dept.id }}');
  const members = Array.from(src ? src.children : []).map(n => ({
    id: Number(n.getAttribute('data-id') || '0'),
    name: n.getAttribute('data-name') || '',
    role: n.getAttribute('data-role') || '',
    email: n.getAttribute('data-email') || '',
    avatar: n.getAttribute('data-avatar') || '',
    active: n.getAttribute('data-active') === '1'
  }));

  // Если никого нет — показываем руководителя
  if (!members.length){
    columns.classList.add('d-none');
    focus.classList.remove('d-none');

    const headAva = "{{ dept.head.avatar|default:'' }}";
    const headName= "{% if dept.head %}{{ dept.head.display_name|default:dept.head.last_name }}{% else %}Руководитель{% endif %}";
    const headRole= "Руководитель отдела";
    const headMail= "{% if dept.head and dept.head.email %}{{ dept.head.email }}{% endif %}";

    if (headAva){
      fImg.src = headAva; fImg.alt = headName; fImg.style.display = 'block';
      fFallback.style.display = 'none';
    } else {
      fImg.removeAttribute('src'); fImg.style.display = 'none';
      fFallback.style.display = 'block';
    }
    if (hintBox) hintBox.classList.add('d-none');
    if (details){
      details.classList.remove('d-none');
      dName && (dName.textContent = headName);
      dRole && (dRole.textContent = headRole);
      dMail && (dMail.textContent = headMail);
    }
    return;
  }

  // Сортировки для 4 колонок: во всех — весь список
  const byNameAsc  = [...members].sort((a,b)=>a.name.localeCompare(b.name,'ru'));
  const byNameDesc = [...members].sort((a,b)=>b.name.localeCompare(a.name,'ru'));
  const byIdAsc    = [...members].sort((a,b)=>a.id-b.id);
  const byRoleAsc  = [...members].sort((a,b)=>{
    const ra = (a.role||'').toLowerCase(), rb = (b.role||'').toLowerCase();
    if (ra === rb) return a.name.localeCompare(b.name,'ru');
    return ra < rb ? -1 : 1;
  });

  function makeItem(m){
    const btn = document.createElement('button');
    btn.type = 'button';
    btn.className = 'wheel-item';
    btn.setAttribute('data-id', String(m.id));
    btn.setAttribute('data-name', m.name);
    btn.setAttribute('data-role', m.role || '');
    btn.setAttribute('data-email', m.email || '');
    btn.setAttribute('data-avatar', m.avatar || '');

    const inner = document.createElement('span');
    inner.className = 'ava';
    if (m.avatar){
      const img = document.createElement('img');
      img.alt = '';
      img.src = m.avatar;
      inner.appendChild(img);
    } else {
      const ico = document.createElement('i');
      ico.className = 'bi-person';
      inner.appendChild(ico);
    }
    btn.appendChild(inner);
    return btn;
  }

  function fillCol(root, arr){
    root.innerHTML = '';
    // Дублируем для «бесконечной» прокрутки
    for (let k=0;k<2;k++){
      arr.forEach(m => root.appendChild(makeItem(m)));
    }
  }
  fillCol(col1, byNameAsc);
  fillCol(col2, byNameDesc);
  fillCol(col3, byIdAsc);
  fillCol(col4, byRoleAsc);

  // Виртуальный скролл
  let vScroll = 0;
  let dir = 1;                // 1 -> вниз, -1 -> вверх
  const speed = 0.45;         // px/frame
  let hover = false;
  let focused = false;
  let maxY = Math.max(0, columns.scrollHeight - wheel.clientHeight);

  function applyScroll(){
    columns.style.transform = `translateY(${-vScroll}px)`;
    if (maxY <= 0){
      arcProg.style.strokeDashoffset = 1;
    } else {
      const p = vScroll / maxY; // 0..1
      arcProg.style.strokeDashoffset = (1 - p).toFixed(4);
    }
  }

  function recalc(){
    maxY = Math.max(0, columns.scrollHeight - wheel.clientHeight);
    vScroll = Math.min(vScroll, maxY);
    applyScroll();
  }
  new ResizeObserver(recalc).observe(wheel);
  window.addEventListener('resize', recalc);

  function loop(){
    if (!hover && !focused && maxY > 0){
      vScroll += dir * speed;
      if (vScroll >= maxY){
        vScroll = maxY;
        dir = -1; // на нижней границе едем вверх
      } else if (vScroll <= 0){
        vScroll = 0;
        dir = 1;  // цикл завершается только на верхней точке
      }
      applyScroll();
    }
    requestAnimationFrame(loop);
  }
  applyScroll();
  requestAnimationFrame(loop);

  // Hover — пауза автоскролла, включаем ручной
  wheel.addEventListener('mouseenter', ()=>{ hover = true; });
  wheel.addEventListener('mouseleave', ()=>{ hover = false; });

  // Ручной скролл колесом
  wheel.addEventListener('wheel', (e)=>{
    if (!focused){
      e.preventDefault();
      vScroll = Math.min(maxY, Math.max(0, vScroll + e.deltaY));
      applyScroll();
    }
  }, { passive: false });

  // Ручной скролл тачем
  let tStartY = null;
  wheel.addEventListener('touchstart', (e)=>{
    if (e.touches && e.touches.length){
      tStartY = e.touches[0].clientY;
    }
  }, { passive: true });
  wheel.addEventListener('touchmove', (e)=>{
    if (tStartY != null && !focused){
      const y = e.touches[0].clientY;
      const dy = tStartY - y;
      vScroll = Math.min(maxY, Math.max(0, vScroll + dy));
      tStartY = y;
      applyScroll();
      e.preventDefault();
    }
  }, { passive: false });
  wheel.addEventListener('touchend', ()=>{ tStartY = null; });

  // Фокус: клик по мини-аве
  columns.addEventListener('click', (e)=>{
    const btn = e.target.closest('.wheel-item');
    if (!btn) return;
    const ava = btn.getAttribute('data-avatar') || '';
    const name= btn.getAttribute('data-name') || 'Сотрудник';
    const role= btn.getAttribute('data-role') || '';
    const mail= btn.getAttribute('data-email') || '';

    focused = true;
    columns.classList.add('d-none');
    focus.classList.remove('d-none');

    if (ava){
      fImg.src = ava; fImg.alt = name; fImg.style.display = 'block';
      fFallback.style.display = 'none';
    } else {
      fImg.removeAttribute('src'); fImg.style.display = 'none';
      fFallback.style.display = 'block';
    }
    hintBox && hintBox.classList.add('d-none');
    if (details){
      details.classList.remove('d-none');
      dName && (dName.textContent = name);
      dRole && (dRole.textContent = role);
      dMail && (dMail.textContent = mail);
    }
  });

  // Выход из фокуса — клик по большому кругу
  focus.addEventListener('click', ()=>{
    focused = false;
    focus.classList.add('d-none');
    columns.classList.remove('d-none');
  });
})();
</script>

{# ===== Переключатель панели настроек (скролл к блоку при открытии) ===== #}
<script>
/* Smooth-scroll к «Настройкам отдела» при открытии на мобильных */
document.addEventListener('DOMContentLoaded', () => {
  const wrap = document.getElementById('deptEditWrap-{{ dept.id }}');
  if (!wrap) return;

  const isMobile = () => window.matchMedia('(max-width: 767.98px)').matches;

  function headerOffset(){
    const sticky = document.querySelector('.ios-header');
    return (sticky?.offsetHeight || 0) + 8;
  }
  function smoothScrollTo(el){
    const top = el.getBoundingClientRect().top + window.pageYOffset - headerOffset();
    try { window.scrollTo({ top, behavior: 'smooth' }); }
    catch { window.scrollTo(0, top); }
  }

  wrap.addEventListener('shown.bs.collapse', () => {
    if (isMobile()) smoothScrollTo(wrap);
  });

  if (wrap.classList.contains('show') && isMobile()) {
    setTimeout(() => smoothScrollTo(wrap), 50);
  }
});
</script>

{# ===== Модал «Добавить участника»: AJAX-поиск ===== #}
<script>
{% url 'employees:employees_list' as employees_list_url %}
(function(){
  const modal  = document.getElementById('addMemberModal-{{ dept.id }}');
  if (!modal) return;

  const form   = modal.querySelector('form');
  const input  = modal.querySelector('[data-add-member-q]');
  const listEl = modal.querySelector('[data-add-member-list]');
  const tpl    = modal.querySelector('#addMemberItemTpl-{{ dept.id }}');
  const hidden = form ? form.querySelector('input[name="employee_id"]') : null;
  const submit = modal.querySelector('[data-add-member-submit]');
  if (!form || !input || !listEl || !tpl || !hidden || !submit) return;

  const excludeAttr = (modal.getAttribute('data-exclude') || '').trim();
  const exclude = new Set(
    excludeAttr ? excludeAttr.split(',').map(x => parseInt(x, 10)).filter(n => !Number.isNaN(n)) : []
  );

  function esc(s){ return String(s).replace(/[&<>"']/g, m=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[m])); }
  function debounce(fn, ms){ let t; return (...a)=>{ clearTimeout(t); t=setTimeout(()=>fn(...a), ms); }; }

  let aborter = null;

  async function searchEmployees(q){
    if (aborter) aborter.abort();
    aborter = new AbortController();

    const params = new URLSearchParams({
      format: 'json',
      q: q,
      limit: '20',
      exclude: Array.from(exclude).join(',')
    });

    const r = await fetch('{{ employees_list_url }}?' + params.toString(), {
      credentials: 'same-origin',
      signal: aborter.signal
    });
    if (!r.ok) throw new Error('HTTP ' + r.status);
    const data = await r.json().catch(()=>({results:[]}));
    return Array.isArray(data) ? data : (data.results || []);
  }

  function render(items){
    listEl.innerHTML = '';
    if (!items.length){
      const empty = document.createElement('div');
      empty.className = 'list-group-item text-muted small py-3';
      empty.textContent = 'Ничего не найдено';
      listEl.appendChild(empty);
      return;
    }
    items.forEach(e => {
      const node = tpl.content.firstElementChild.cloneNode(true);
      node.dataset.id = e.id;
      const ava = node.querySelector('.feed-ava');
      if (ava){
        ava.innerHTML = e.avatar
          ? `<img src="${esc(e.avatar)}" alt="" style="width:100%;height:100%;object-fit:cover;">`
          : '<i class="bi-person"></i>';
      }
      const nameEl = node.querySelector('.js-name');
      if (nameEl){
        nameEl.textContent = e.display_name || (e.last_name ? (e.last_name + (e.first_name ? ' ' + e.first_name : '')) : ('Сотрудник #' + e.id));
      }
      const emailEl = node.querySelector('.js-email');
      if (emailEl) emailEl.textContent = e.email || '';

      node.addEventListener('click', () => {
        listEl.querySelectorAll('.list-group-item').forEach(li => li.classList.remove('active'));
        node.classList.add('active');
        hidden.value = String(e.id);
        submit.disabled = false;
        submit.removeAttribute('disabled');
      });
      listEl.appendChild(node);
    });
  }

  const run = debounce(async (q) => {
    submit.disabled = true;
    hidden.value = '';
    try { render(await searchEmployees(q)); }
    catch { listEl.innerHTML = '<div class="list-group-item text-muted small py-3">Ошибка загрузки</div>'; }
  }, 200);

  input.addEventListener('input', () => run(input.value));
  input.addEventListener('keydown', (e) => {
    if (e.key === 'Enter'){
      const cur = listEl.querySelector('.list-group-item.active') || listEl.querySelector('.list-group-item');
      if (cur && cur.dataset.id){
        e.preventDefault();
        cur.click();
      }
    }
  });

  modal.addEventListener('shown.bs.modal', () => {
    input.value = '';
    hidden.value = '';
    submit.disabled = true;
    input.focus();
    run('');
  });

  form.addEventListener('submit', (e) => {
    if (!hidden.value){
      e.preventDefault();
      input.focus();
    }
  });
})();
</script>

{# ===== Модал «Удалить участника»: локальный выбор ===== #}
<script>
(function(){
  const modal  = document.getElementById('removeMemberModal-{{ dept.id }}');
  if (!modal) return;

  const form      = modal.querySelector('form');
  const input     = document.getElementById('removeMemberSearch-{{ dept.id }}');
  const listBox   = document.getElementById('removeMemberResults-{{ dept.id }}');
  const hiddenEmp = document.getElementById('removeMemberChosen-{{ dept.id }}');
  const hiddenLink= document.getElementById('removeMemberLink-{{ dept.id }}');
  const submit    = document.getElementById('removeMemberSubmit-{{ dept.id }}');
  if (!form || !input || !listBox || !hiddenEmp || !hiddenLink || !submit) return;

  function norm(s){ return String(s||'').toLowerCase(); }
  function clearActive(){ listBox.querySelectorAll('.active').forEach(el => el.classList.remove('active')); }
  function matches(item, q){
    const name  = norm(item.getAttribute('data-name') || '');
    const email = norm(item.getAttribute('data-email') || '');
    const id    = String(item.getAttribute('data-id') || '');
    return !q || name.includes(q) || email.includes(q) || id.includes(q);
  }
  function applyFilter(){
    const q = norm(input.value);
    listBox.querySelectorAll('.list-group-item, .list-group-item-action').forEach(it => {
      const ok = matches(it, q);
      it.classList.toggle('d-none', !ok);
    });
  }

  input.addEventListener('input', applyFilter);

  listBox.addEventListener('click', (e) => {
    const it = e.target.closest('[data-id]');
    if (!it) return;
    clearActive();
    it.classList.add('active');
    hiddenEmp.value  = it.getAttribute('data-id') || '';
    hiddenLink.value = it.getAttribute('data-link-id') || '';
    submit.disabled  = !(hiddenEmp.value || hiddenLink.value);
    if (!submit.disabled) submit.removeAttribute('disabled');
  });

  modal.addEventListener('shown.bs.modal', () => {
    input.value = '';
    clearActive();
    applyFilter();
    hiddenEmp.value  = '';
    hiddenLink.value = '';
    submit.disabled  = true;
    input.focus();
  });

  form.addEventListener('submit', (e) => {
    if (!hiddenEmp.value && !hiddenLink.value){
      e.preventDefault();
      input.focus();
    }
  });
})();
</script>

{# ===== Модал «Назначить роль»: подстановка empId в action ===== #}
<script>
(function(){
  const modal   = document.getElementById('setRoleModal-{{ dept.id }}');
  if (!modal) return;

  const form    = modal.querySelector('form');
  const actionTpl = form ? form.getAttribute('data-action-template') : null;
  const input   = document.getElementById('setRoleSearch-{{ dept.id }}');
  const listBox = document.getElementById('setRoleResults-{{ dept.id }}');
  const hidden  = document.getElementById('setRoleChosen-{{ dept.id }}');
  const select  = document.getElementById('setRoleSelect-{{ dept.id }}');
  const submit  = document.getElementById('setRoleSubmit-{{ dept.id }}');
  if (!form || !input || !listBox || !hidden || !select || !submit) return;

  function setAction(empId){
    if (!actionTpl) return;
    // /employees/0/departments/<deptId>/set-role/ -> /employees/<empId>/departments/<deptId>/set-role/
    const newAction = actionTpl.replace(/(\/employees\/)(\d+)(\/)/, '$1' + String(empId) + '$3');
    form.setAttribute('action', newAction);
  }

  function norm(s){ return String(s||'').toLowerCase(); }
  function clearActive(){ listBox.querySelectorAll('.active').forEach(el => el.classList.remove('active')); }
  function matches(item, q){
    const name  = norm(item.getAttribute('data-name') || '');
       const email = norm(item.getAttribute('data-email') || '');
    const id    = String(item.getAttribute('data-id') || '');
    return !q || name.includes(q) || email.includes(q) || id.includes(q);
  }
  function applyFilter(){
    const q = norm(input.value);
    listBox.querySelectorAll('.list-group-item, .list-group-item-action').forEach(it => {
      const ok = matches(it, q);
      it.classList.toggle('d-none', !ok);
    });
  }

  input.addEventListener('input', applyFilter);

  listBox.addEventListener('click', (e) => {
    const it = e.target.closest('[data-id]');
    if (!it) return;
    clearActive();
    it.classList.add('active');
    const empId = it.getAttribute('data-id') || '';
    hidden.value = empId;
    if (empId) {
      setAction(empId);
      submit.disabled = false;
      submit.removeAttribute('disabled');
    } else {
      submit.disabled = true;
    }
  });

  modal.addEventListener('shown.bs.modal', () => {
    input.value = '';
    clearActive();
    applyFilter();
    hidden.value = '';
    submit.disabled = true;
    input.focus();
    if (actionTpl) form.setAttribute('action', actionTpl);
  });

  form.addEventListener('submit', (e) => {
    if (!hidden.value){
      e.preventDefault();
      input.focus();
    }
  });
})();
</script>
<script>
  document.addEventListener('DOMContentLoaded', () => {
    if (!window.bootstrap) return;
    document.querySelectorAll('[data-tooltip="1"]').forEach(el => {
      try { new bootstrap.Tooltip(el); } catch(_) {}
    });
  });
</script>

{% endblock %}