{# templates/employees/employee_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/employee-list.css' %}">
  <link rel="stylesheet" href="{% static 'css/components/feed-header.css' %}">
{% endblock %}


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

      <div class="feed-header d-flex align-items-center">
        <i class="bi-people fs-2 text-primary"></i>
        <h2 class="title mb-0">Сотрудники</h2>

        {% if is_filtered_by_department and current_department %}
          <span class="ms-2 small text-secondary">
            Отдел: {{ current_department.name }} • {{ employees|length }}
          </span>
        {% else %}
          <span class="ms-2 small text-secondary">Всего: {{ employees|length }}</span>
        {% endif %}

        <div class="ms-auto ios-search">
          <i class="bi-search"></i>
          <input id="empFilter" type="search" class="ios-search-input"
                 placeholder="Поиск по ФИО, должности или отделу" autocomplete="off">
          <button type="button" class="ios-search-clear" aria-label="Очистить">
            <i class="bi-x-lg"></i>
          </button>
        </div>
      </div>
      {% if perms.employees.add_employee or request.user.is_staff or request.user.is_superuser %}
        <div class="feed-card mb-2">
          <a href="{% url 'employees:employee_create' %}"
            class="dept-row d-flex w-100 justify-content-center align-items-center gap-2 text-decoration-none"
            role="button" aria-label="Создать отдел">
            <span class="feed-author">Создать профиль</span>
            <i class="bi-plus-lg"></i>
          </a>
        </div>
      {% endif %}
      <div id="empList" class="feed-stream">
        {% if employees %}
          {% for emp in employees %}
            <article class="emp-row"
                     data-name="{{ emp.last_name }} {{ emp.first_name }} {{ emp.patronymic }} {% firstof emp.position.name emp.position_label '' %}"
                     data-depts="{% if emp.departments %}{% for d in emp.departments %}{% if d.name %}{{ d.name }}{% if not forloop.last %}, {% endif %}{% endif %}{% endfor %}{% elif is_filtered_by_department and current_department %}{{ current_department.name }}{% endif %}">
              <header class="feed-hd">
                <div class="feed-ava">
                  {% if emp.avatar %}
                    <img src="{{ emp.avatar }}" alt="{{ emp.last_name }} {{ emp.first_name }}">
                  {% else %}
                    <i class="bi-person"></i>
                  {% endif %}
                </div>

                <div class="feed-meta flex-grow-1">
                  <div class="d-flex align-items-center gap-2 flex-wrap">
                    {% if emp.id %}
                      <a href="{% url 'employees:employee_detail' emp.id %}" class="feed-author text-decoration-none">
                        {{ emp.last_name }} {{ emp.first_name }}{% if emp.patronymic %} {{ emp.patronymic }}{% endif %}
                      </a>
                    {% else %}
                      <span class="feed-author">
                        {{ emp.last_name }} {{ emp.first_name }}{% if emp.patronymic %} {{ emp.patronymic }}{% endif %}
                      </span>
                    {% endif %}

                    {% if emp.position and emp.position.name %}
                      <span class="emp-pos">— {{ emp.position.name }}</span>
                    {% elif emp.position_label %}
                      <span class="emp-pos">— {{ emp.position_label }}</span>
                    {% elif emp.position %}
                      <span class="emp-pos">— Должность #{{ emp.position }}</span>
                    {% endif %}
                  </div>

                  {% if emp.departments %}
                    <div class="feed-sub">
                      {% for d in emp.departments %}
                        {% if d.name %}
                          {% if d.id %}
                            <a href="{% url 'employees:department_detail' d.id %}">{{ d.name }}</a>
                          {% else %}
                            {{ d.name }}
                          {% endif %}
                          {% if not forloop.last %}, {% endif %}
                        {% endif %}
                      {% endfor %}
                    </div>
                  {% elif is_filtered_by_department and current_department %}
                    <div class="feed-sub">{{ current_department.name }}</div>
                  {% endif %}
                </div>

                <div class="ms-auto d-flex align-items-center gap-2">
                  {% if emp.id and user.id != emp.id %}
                    {% if can_manage_roles and is_filtered_by_department and current_department and emp.id != current_department.head_id %}
                      <a href="{% url 'employees:edit_department_role' current_department.id emp.id %}?next={{ request.get_full_path|urlencode }}"
                         class="btn btn-ghost action-btn" title="Изменить роль">
                        <i class="bi-pencil"></i><span class="d-none d-sm-inline ms-1">Роль</span>
                      </a>
                    {% endif %}
                    <a href="{% url 'communications:start_private_chat' emp.id %}"
                       class="btn btn-ghost action-btn" title="Чат">
                      <i class="bi-chat-dots"></i><span class="d-none d-sm-inline ms-1">Чат</span>
                    </a>
                  {% endif %}
                </div>
              </header>

              <div class="feed-body"></div>
            </article>
          {% endfor %}
        {% else %}
          <div class="alert alert-info shadow-sm">Нет сотрудников.</div>
        {% endif %}
      </div>

      {% if next_page or prev_page %}
        <nav class="mt-3">
          <ul class="pagination">
            <li class="page-item {% if not prev_page %}disabled{% endif %}">
              <a class="page-link" href="?page={{ prev_page }}{% if q %}&q={{ q|urlencode }}{% endif %}">Назад</a>
            </li>
            <li class="page-item {% if not next_page %}disabled{% endif %}">
              <a class="page-link" href="?page={{ next_page }}{% if q %}&q={{ q|urlencode }}{% endif %}">Вперёд</a>
            </li>
          </ul>
        </nav>
      {% endif %}

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

<script type="module">
  import { ListFilter, createDataAttrMatcher } from '{% static "js/components/listFilter.js" %}';
  
  // Используем ListFilter вместо кастомной функции applyFilter()
  new ListFilter({
    listSelector: '#empList',
    itemSelector: '.emp-row',
    searchInputSelector: '#empFilter',
    clearButtonSelector: '.ios-search-clear',
    matchFn: createDataAttrMatcher(['name', 'depts']),
    debounceMs: 300
  });
</script>
{% endblock %}