{% extends "public/base.html" %}
{% load static %}

{% block title %}Insights — {{ site.site_name }}{% endblock %}
{% block meta_description %}Articles, tips and digital insights from the {{ company }} team.{% endblock %}

{% block extra_head %}
<script src="{% static 'js/masonry.pkgd.min.js' %}" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/5.0.0/imagesloaded.pkgd.min.js" defer></script>
{% endblock %}

{% block content %}
<div class="section-first-inner">

    <div class="section compact-bottom">
        <div class="hero-container">
            <div class="banner-inner">
                <div class="banner-inner-content">
                    <h1>Insights</h1>
                </div>
            </div>
        </div>
    </div>

    <div class="section">
        <div class="hero-container">
            <div class="d-flex flex-column gspace-2">

                {% if categories %}
                <div class="d-flex flex-wrap gap-2 mb-3">
                    <a href="{% url 'insights' %}" class="btn btn-sm {% if not active_category %}btn-accent{% else %}btn-accent-outline{% endif %}">All</a>
                    {% for cat in categories %}
                    <a href="?category={{ cat.slug }}" class="btn btn-sm {% if active_category.slug == cat.slug %}btn-accent{% else %}btn-accent-outline{% endif %}">{{ cat.name }}</a>
                    {% endfor %}
                </div>
                {% endif %}

                {% if posts %}
                <div class="row" id="cardsRow" data-masonry='{"percentPosition": true }'>
                    {% include "public/partials/insights_cards.html" %}
                </div>
                {% else %}
                <div class="col-12 text-center py-5">
                    <p class="secondary-accent">No posts published yet. Check back soon.</p>
                </div>
                {% endif %}

                <div class="text-center mt-4" id="loadMoreWrap">
                    {% if posts.has_next %}
                    <button class="btn btn-accent-outline" id="loadMoreBtn" data-next-page="{{ posts.next_page_number }}">Load More</button>
                    {% endif %}
                </div>

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


</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function () {
    var grid = document.querySelector('#cardsRow');
    var msnry;

    function initMasonry() {
        if (typeof Masonry !== 'undefined' && grid) {
            msnry = new Masonry(grid, { percentPosition: true });
            if (typeof imagesLoaded !== 'undefined') {
                imagesLoaded(grid, function () { msnry.layout(); });
            }
        }
    }

    initMasonry();

    var btn = document.getElementById('loadMoreBtn');
    if (btn) {
        btn.addEventListener('click', function () {
            var page = btn.dataset.nextPage;
            var url  = new URL(window.location.href);
            url.searchParams.set('page', page);
            btn.textContent = 'Loading...';
            btn.disabled = true;

            fetch(url.toString(), { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
                .then(r => r.text())
                .then(html => {
                    var tmp = document.createElement('div');
                    tmp.innerHTML = html;
                    var sentinel = tmp.querySelector('#load-more-sentinel');
                    if (sentinel) {
                        btn.dataset.nextPage = sentinel.dataset.nextPage;
                        sentinel.remove();
                        btn.textContent = 'Load More';
                        btn.disabled = false;
                    } else {
                        var wrap = document.getElementById('loadMoreWrap');
                        if (wrap) wrap.remove();
                    }
                    var newItems = Array.from(tmp.children);
                    newItems.forEach(function (el) {
                        // strip animation classes so cards aren't hidden by the scroll observer
                        el.querySelectorAll('.animate-box').forEach(function (box) {
                            box.classList.remove('animate-box', 'animate__animated', 'animated-fast');
                            box.style.opacity = '1';
                            box.style.visibility = 'visible';
                        });
                        grid.appendChild(el);
                    });
                    if (msnry) {
                        if (typeof imagesLoaded !== 'undefined') {
                            imagesLoaded(newItems, function () { msnry.appended(newItems); });
                        } else {
                            msnry.appended(newItems);
                        }
                    }
                });
        });
    }
});
</script>
{% endblock %}