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

{% block title %}Services — {{ site.site_name }}{% endblock %}
{% block meta_description %}Explore our full range of web design, development and digital marketing services.{% 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>Services</h1>
                </div>
            </div>
        </div>
    </div>

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

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

                <div class="text-center mt-4" id="loadMoreWrap">
                    {% if services.has_next %}
                    <button class="btn btn-accent-outline" id="loadMoreBtn" data-next-page="{{ services.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;

        url.searchParams.set('partial', '1');
        fetch(url.toString())
            .then(function(r){ return r.text(); })
            .then(function(html){
                // Remove old sentinel from grid
                var old = grid.querySelector('#load-more-sentinel');
                if (old) old.remove();

                // Parse response and extract sentinel before injecting
                var tmp = document.createElement('div');
                tmp.innerHTML = html;
                var sentinel = tmp.querySelector('#load-more-sentinel');
                if (sentinel) sentinel.remove();

                // Inject remaining HTML (the new cards) into grid
                grid.insertAdjacentHTML('beforeend', tmp.innerHTML);

                // Trigger animations on newly added cards (observer won't catch them)
                grid.querySelectorAll('[data-animate]:not(.animate__fadeIn)').forEach(function(el){
                    el.classList.add(el.getAttribute('data-animate'));
                    el.style.opacity = 1;
                });

                // Update or hide the button
                if (sentinel) {
                    btn.dataset.nextPage = sentinel.dataset.nextPage;
                    btn.textContent = 'Load More';
                    btn.disabled = false;
                } else {
                    document.getElementById('loadMoreWrap').style.display = 'none';
                }
            })
            .catch(function(){
                btn.textContent = 'Load More';
                btn.disabled = false;
            });
    });
});
</script>
{% endblock %}