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

{% block title %}Portfolio — {{ site.site_name }}{% endblock %}
{% block meta_description %}Our portfolio of web portals, mobile apps and digital marketing projects.{% 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>Portfolio</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 'portfolio' %}" 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 %}

                <div class="row row-cols-lg-3 row-cols-md-2 row-cols-1 grid-spacer-2" id="cardsRow">
                    {% include "public/partials/portfolio_cards.html" %}
                </div>

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

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

</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function () {
    var grid = document.getElementById('cardsRow');
    var btn  = document.getElementById('loadMoreBtn');
    if (!btn) return;

    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 {
                    document.getElementById('loadMoreWrap').remove();
                }
                Array.from(tmp.children).forEach(function (el) {
                    grid.appendChild(el);
                });
            });
    });
});
</script>
{% endblock %}