{# 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/common.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/list-view.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-people" title="Сотрудники" count=employees|length count_label=count_label search_id="empFilter" search_placeholder="Поиск по ФИО, должности или отделу" has_filters=True filters_target="empFilters" filters_template="employees/_filters.html" create_as_card=True create_modal="createEmployeeModal" create_text="Создать профиль" %}
      
      <div class="card mb-3">
        <div id="empList" class="list-view card-list">
          {# Список загружается через JavaScript из employeesList.js #}
          <div class="text-center py-4">
            <div class="spinner-border text-primary" role="status">
              <span class="visually-hidden">Загрузка...</span>
            </div>
          </div>
        </div>
      </div>

      {# Пагинация #}
      {% if next_url or prev_url %}
        <div class="d-flex justify-content-between align-items-center mt-3">
          <a class="btn btn-outline-secondary {% if not prev_url %}disabled{% endif %}" 
             href="{{ prev_url|default:'#' }}"
             {% if not prev_url %}aria-disabled="true"{% endif %}>
            <i class="bi-arrow-left"></i> Назад
          </a>
          {% if count %}
            <span class="text-body-secondary small">Всего: {{ count }}</span>
          {% endif %}
          <a class="btn btn-outline-secondary {% if not next_url %}disabled{% endif %}" 
             href="{{ next_url|default:'#' }}"
             {% if not next_url %}aria-disabled="true"{% endif %}>
            Вперёд <i class="bi-arrow-right"></i>
          </a>
        </div>
      {% endif %}

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

{# Модальное окно для создания сотрудника #}
{% include "employees/modals/_create_employee.html" %}

<script type="module">
  import { ListFilter, createDataAttrMatcher } from '{% static "js/components/listFilter.js" %}';
  import { initCreateEmployeeModal } from '{% static "js/components/createEmployeeModal.js" %}';
  import { initEmployeesList } from '{% static "js/components/employeesList.js" %}';
  
  document.addEventListener('DOMContentLoaded', () => {
    // Передаем ID текущего пользователя в глобальную переменную
    window.currentUserId = {{ user.id|default:'null' }};
    
    // Инициализация списка сотрудников через AJAX
    const employeesList = initEmployeesList({
      containerId: 'empList'
    });
    
    // Инициализация фильтра списка (работает с data-атрибутами)
    new ListFilter({
      listSelector: '#empList',
      itemSelector: '.emp-row',
      searchInputSelector: '#empFilter',
      clearButtonSelector: '.ios-search-clear',
      matchFn: createDataAttrMatcher(['name', 'depts']),
      debounceMs: 300
    });
    
    // Инициализация модала создания сотрудника
    initCreateEmployeeModal({
      submitUrl: '{% url "employees:employee_create_modal" %}'
    });
  });
</script>
{% endblock %}