{% extends 'lara_django_base/lara_base.html' %}

{% block head_title %}LARA Apps{% endblock head_title %}

{% block content %}
{# Apps page — card grid is lazy-loaded via htmx for fast initial paint. #}

<div class="bg-gray-100 min-h-screen min-w-full">

    <div id="apps-grid"
         class="grid gap-3 sm:gap-4 2xl:gap-6
                grid-cols-1 md:grid-cols-2 lg:grid-cols-3
                px-4 sm:px-6 py-4 lg:py-6 2xl:mx-auto 2xl:w-11/12 2xl:py-12"
         hx-get="{% url 'lara_django_base:apps_list_partial' %}"
         hx-trigger="load"
         hx-swap="innerHTML"
         hx-indicator="#apps-spinner">

        {# Placeholder spinner shown until the htmx swap completes #}
        <div id="apps-spinner"
             class="col-span-full flex justify-center items-center py-20">
            {% include 'lara_django_base/partials/spinner.html' %}
        </div>
    </div>

</div>

{% endblock content %}