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

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

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

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

        <div class="feed-header d-flex align-items-center gap-3">
          <i class="bi-megaphone fs-2 text-primary"></i>
          <h2 class="title mb-0">Лента</h2>

          {% if user.is_authenticated and user.is_staff %}
            <a class="btn btn-primary ms-auto" href="{% url 'feed:post_create' %}?type=company">
              <i class="bi-plus-circle me-1"></i> Новая публикация
            </a>
          {% endif %}
        </div>

        {% if new_employees %}
          <div class="feed-new mb-3">
            <div class="d-flex justify-content-between align-items-center mb-2">
              <h6 class="mb-0 text-secondary">Присоединились недавно</h6>
              <a href="{% url 'employees:employees_list' %}" class="small text-primary text-decoration-none">Все сотрудники</a>
            </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 class="text-center">
                        <a class="link" href="{% url 'employees:employee_detail' emp_id %}">Профиль →</a>
                      </div>
                    </div>
                  </div>
                {% endfor %}
              </div>
            </div>
          </div>
        {% endif %}

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

        {% if page %}
          <div class="mt-4">
            {% bootstrap_pagination page %}
          </div>
        {% endif %}

      </div>
    </div>
  </div>
{% endblock %}

<script>
(function(){
  const STEP_MS = 3000;
  const SCROLL_BEHAVIOR = 'smooth';

  function centerItemInView(wrap, item){
    const r = item.getBoundingClientRect();
    const w = wrap.getBoundingClientRect();
    const delta = (r.left + r.width/2) - (w.left + w.width/2);
    wrap.scrollTo({ left: wrap.scrollLeft + delta, behavior: SCROLL_BEHAVIOR });
  }

  function initAutoScroller(wrap){
    const rail = wrap.querySelector('.join-rail');
    if (!rail) return;

    // если контент не переполняет — автоскролл не нужен
    const overflowX = rail.scrollWidth > wrap.clientWidth + 4;
    if (!overflowX) return;

    // удвоим содержимое для бесшовного цикла
    const children = Array.from(rail.children);
    rail.append(...children.map(n => n.cloneNode(true)));

    // шаг = ширина первой ячейки + gap
    function computeStep(){
      const first = rail.firstElementChild;
      if (!first) return 0;
      const rect = first.getBoundingClientRect();
      const gap = parseFloat(getComputedStyle(rail).gap || '0') || 0;
      return Math.round(rect.width + gap);
    }
    let step = computeStep();
    const origCount = children.length;
    let timer = null, paused = false;

    function tick(){
      if (paused) return;
      const maxLeft = (step * origCount);
      if (wrap.scrollLeft >= maxLeft - 2){ wrap.scrollLeft = 0; }
      wrap.scrollBy({ left: step, behavior: SCROLL_BEHAVIOR });
    }

    function start(){ if (!timer) timer = setInterval(tick, STEP_MS); }
    function stop(){ if (timer){ clearInterval(timer); timer = null; } }

    // Пауза при наведении/фокусе на конкретной ячейке + центрирование
    rail.querySelectorAll('.join-item').forEach(item=>{
      item.addEventListener('mouseenter', ()=>{
        paused = true;
        centerItemInView(wrap, item);
      });
      item.addEventListener('mouseleave', ()=>{ paused = false; });
      item.addEventListener('focusin', ()=>{
        paused = true;
        centerItemInView(wrap, item);
      });
      item.addEventListener('focusout', ()=>{ paused = false; });
    });

    // Пересчёт шага на ресайз
    let rAF = null;
    window.addEventListener('resize', ()=>{
      cancelAnimationFrame(rAF);
      rAF = requestAnimationFrame(()=>{ step = computeStep(); });
    });

    // Остановка при свёрнутой вкладке
    document.addEventListener('visibilitychange', ()=>{
      if (document.hidden) stop(); else start();
    });

    // Уважим reduced-motion
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;

    start();
  }

  document.addEventListener('DOMContentLoaded', ()=>{
    document.querySelectorAll('.js-join-scroller').forEach(initAutoScroller);
  });
})();
</script>