{# 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">
          {% if employees %}
            {% for emp in employees %}
            <article class="emp-row list-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="card-header">
                <div class="card-icon">
                  {% if emp.avatar %}
                    <img src="{{ emp.avatar }}" alt="{{ emp.last_name }} {{ emp.first_name }}">
                  {% else %}
                    <i class="bi-person"></i>
                  {% endif %}
                </div>

                <div class="card-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="card-title text-decoration-none">
                        {{ emp.last_name }} {{ emp.first_name }}{% if emp.patronymic %} {{ emp.patronymic }}{% endif %}
                      </a>
                    {% else %}
                      <span class="card-title">
                        {{ 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="card-subtitle">
                      {% 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="card-subtitle">{{ 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="card-body"></div>
            </article>
          {% endfor %}
        {% else %}
          <div class="alert alert-info shadow-sm">Нет сотрудников.</div>
        {% endif %}
        </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" %}';
  
  // Инициализация фильтра списка
  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 %}