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

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

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/components/join-scroller.css' %}">
<link rel="stylesheet" href="{% static 'css/components/page-header.css' %}">
<link rel="stylesheet" href="{% static 'css/components/feed-specific.css' %}">
{% endblock %}

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

        {# ===== НОВАЯ ШАПКА С КОМПОНЕНТОМ ===== #}
        {% if user.is_authenticated and user.is_staff %}
          {% 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 %}

        {% if new_employees %}
          <div>
            <div class="d-flex justify-content-between align-items-center mb-2">
              <h6 class="mb-0 text-secondary"></h6>
            </div>

            <div class="join-scroller js-join-scroller" aria-label="Новые сотрудники">
              <div class="join-rail">
                {% for emp in new_employees %}
                  {% firstof emp.id emp.pk as emp_id %}
                  {% firstof emp.avatar emp.avatar as ava %}
                  {% firstof emp.short_name emp.get_short_name emp.full_name emp.get_full_name emp.email "Сотрудник" as emp_name %}
                  {% firstof emp.department.name emp.department_name as dept_name %}


                  <div class="join-item">
                    <a href="{% url 'employees:employee_detail' emp_id %}"
                       class="join-ava text-decoration-none"
                       title="{{ emp_name }}">
                      {% if ava %}
                        {% if ava.url %}
                          <img src="{{ ava.url }}" alt="">
                        {% else %}
                          <img src="{{ ava }}" alt="">
                        {% endif %}
                      {% else %}
                        <i class="bi-person" aria-hidden="true"></i>
                        <span class="visually-hidden">{{ emp_name }}</span>
                      {% endif %}
                    </a>

                    <div class="join-info">
                      <div class="name">{{ emp_name }}</div>
                      {% if dept_name %}<div class="sub">{{ dept_name }}</div>{% endif %}

                      {# НАВЫКИ — печать всех, без итерации по строкам #}
                      {% if emp.skills and emp.skills.0.name %}
                        <div class="skills-line"><b>Навыки:</b>
                          {% for s in emp.skills %}{% if not forloop.first %}, {% endif %}{{ s.name }}{% endfor %}
                        </div>
                      {% endif %}


                    </div>
                  </div>
                {% endfor %}
              </div>
            </div>
            <div class="d-flex justify-content-between align-items-center mb-2">
              <h6 class="mb-0 text-secondary"></h6>
            </div>
          </div>
        {% endif %}

        <section class="card mb-3">
          <div class="card-header">
          </div>
          <div id="feedList">
            {% if posts %}
              {% include "feed/_feed_cards.html" with items=posts %}
            {% else %}
              <div class="alert alert-info shadow-sm mt-2">Пока нет новостей.</div>
            {% endif %}
          </div>
        </section>

        {# Пагинация #}
        {% 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 "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 { initAutoScroller } from "{% static 'js/components/autoScrollerHandler.js' %}";
  import { initCreatePostModal } from "{% static 'js/components/createPostModal.js' %}";
  import { ListFilter, createDataAttrMatcher } from '{% static "js/components/listFilter.js" %}';

  document.addEventListener('DOMContentLoaded', () => {
    initAutoScroller({ 
      selector: '.js-join-scroller',
      speed: 0.5  // пикселей за кадр (примерно 30px/сек)
    });
    
    // Инициализация модала создания публикации
    initCreatePostModal({
      apiUrl: '{% url "api:v1:posts-list" %}'
    });
    
    // Инициализация поиска по публикациям
    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="https://cdn.jsdelivr.net/npm/emoji-picker-element@^1/index.js"></script>
{% endblock %}