{% 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">

      {# ===== НОВАЯ ШАПКА С КОМПОНЕНТОМ ===== #}
      {% if can_create_departments or perms.employees.add_department or request.user.is_staff or request.user.is_superuser %}
        {% include "includes/components/page_header.html" with icon="bi-diagram-3" title="Отделы" count=departments|length count_label="Всего:" search_id="deptFilter" search_placeholder="Поиск по названию или руководителю" create_as_card=True create_modal="createDepartmentModal" create_text="Создать отдел" %}
      {% else %}
        {% include "includes/components/page_header.html" with icon="bi-diagram-3" title="Отделы" count=departments|length count_label="Всего:" search_id="deptFilter" search_placeholder="Поиск по названию или руководителю" %}
      {% endif %}
      
      <div class="card mb-3">
        <div id="deptList" class="list-view card-list">
          {# поддержка обоих форматов: dict(results) или list #}
          {% with rows=departments.results|default:departments %}
            {% for dept in rows %}
              {% with h=dept.head emp=dept.employees_count|default:0 %}
                {% url 'employees:department_detail' dept.id as dept_url %}
                <article class="dept-row list-row"
                     data-haystack="{{ dept.name }}{% if h %} {{ h.last_name }}{% if h.first_name %} {{ h.first_name }}{% endif %}{% endif %}"
                     data-emp="{{ emp }}">
                  <header class="card-header">
                    <div class="card-meta flex-grow-1">
                      <div class="d-flex align-items-center gap-2 flex-wrap">
                        {% if dept_url %}
                          <a href="{{ dept_url }}" class="card-title text-decoration-none">
                            {{ dept.name }}
                          </a>
                        {% else %}
                          <span class="card-title">{{ dept.name }}</span>
                        {% endif %}
                      </div>
                      <div class="card-subtitle mt-1">
                        {% if h %}
                          Руководитель: {{ h.last_name }}{% if h.first_name %} {{ h.first_name }}{% endif %}
                        {% endif %}
                        {% if h and emp %} · {% endif %}
                        {% if emp %}{{ emp }} сотрудников{% endif %}
                      </div>
                    </div>
                    {% if dept_url %}
                    {% endif %}
                  </header>
                </article>
              {% endwith %}
            {% empty %}
              <div class="alert alert-info shadow-sm">Отделов пока нет.</div>
            {% endfor %}
          {% endwith %}
        </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 class="mt-3 text-secondary small">
        Всего сотрудников: <span id="empTotal">0</span>
      </div>

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

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

<script type="module">
  import { initDepartmentFilter } from "{% static 'js/components/departmentFilterHandler.js' %}";
  import { initCreateDepartmentModal } from "{% static 'js/components/createDepartmentModal.js' %}";
  
  initDepartmentFilter({
    inputId: 'deptFilter',
    clearSelector: '.ios-search-clear',
    listId: 'deptList',
    totalEmpId: 'empTotal',
    totalDeptSelector: '.title ~ .ms-2.small',
    emptyNoticeId: 'deptEmptyNotice',
    rowSelector: '.dept-row'
  });
  
  // Инициализация модала создания отдела
  initCreateDepartmentModal({
    submitUrl: '{% url "api:v1:departments-list" %}'
  });
</script>

{% endblock %}