{% extends "base.html" %}
{% load static django_bootstrap5 %}

{% block title %}Лента{% endblock %}

{% block extra_css %}{% endblock %}

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

        {# ===== НОВАЯ ШАПКА С КОМПОНЕНТОМ ===== #}
        {# Показываем кнопку создания для: staff ИЛИ тех, у кого есть право add_post #}
        {% if user.is_authenticated and user.is_staff or perms.feed.add_post %}
          {% include "includes/components/page_header.html" with icon="bi-megaphone" title="Лента" search_id="feedFilter" search_placeholder="Поиск по названию, автору или содержанию" create_as_card=True create_modal="createPostModal" create_text="Создать публикацию" %}
        {% else %}
          {% include "includes/components/page_header.html" with icon="bi-megaphone" title="Лента" search_id="feedFilter" search_placeholder="Поиск по названию, автору или содержанию" %}
        {% endif %}

        {# Контейнер для новых сотрудников - загружается через JS #}
        <div id="newEmployeesContainer" style="display: none;">
          {# Загружается через newEmployeesScroller.js #}
        </div>

        <section class="card mb-3">
          <div class="card-header">
          </div>
          <div id="feedList">
            {# Посты загружаются через JavaScript из feedList.js #}
          </div>
        </section>

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

{# Модальное окно для создания публикации #}
{% include "feed/components/modal_create_post.html" %}

{# Модальное окно для просмотра публикации #}
{% include "feed/components/modal_post_detail.html" %}

<script src="{% static 'js/components/postDetailModal.js' %}"></script>
<script src="{% static 'js/components/feedLikes.js' %}"></script>
<script src="{% static 'js/components/feedComments.js' %}"></script>

<script type="module">
  import { initCreatePostModal } from "{% static 'js/components/createPostModal.js' %}";
  import { FeedList } from '{% static "js/components/feedList.js" %}';
  import { ListFilter, createDataAttrMatcher } from '{% static "js/components/listFilter.js" %}';
  import { initNewEmployeesScroller } from '{% static "js/components/newEmployeesScroller.js" %}';

  document.addEventListener('DOMContentLoaded', () => {
    // Инициализация модала создания публикации
    const createModal = initCreatePostModal({
      apiUrl: '{% url "api:v1:posts-list" %}'
    });
    
    // ✨ Новая загрузка ленты через API
    window.feedList = new FeedList({
      containerId: 'feedList',
      apiUrl: '{% url "api:v1:posts-list" %}',
      params: { type: 'company' }
    });
    
    // 🆕 Загрузка новых сотрудников через AJAX (автоскролл инициализируется внутри)
    initNewEmployeesScroller('newEmployeesContainer');
    
    // Обновляем ленту после создания поста
    if (createModal) {
      document.getElementById('createPostForm')?.addEventListener('submit', async (e) => {
        // Ждем немного и обновляем ленту
        setTimeout(() => {
          if (window.feedList) {
            window.feedList.refresh();
          }
        }, 1000);
      });
    }
    
    // Инициализация поиска по публикациям
    new ListFilter({
      listSelector: '#feedList',
      itemSelector: '.feed-post',
      searchInputSelector: '#feedFilter',
      clearButtonSelector: '.ios-search-clear',
      matchFn: createDataAttrMatcher(['searchtitle', 'searchauthor', 'searchbody']),
      debounceMs: 300
    });
  });
</script>

<!-- Emoji Picker Library -->
<script type="module" src="{% static 'vendor/emoji-picker/index.js' %}"></script>
{% endblock %}