{% load i18n insight_tags %}

{% for item in items %}
    <article class="p-4 mb-4 bg-insight-surface border border-insight-surface rounded-insight-surface">
        <h3>{{ item.title }}</h3>
        <p class="text-insight-body">{{ item.content }}</p>
    </article>
{% endfor %}

{% if has_next %}
    {% if auto_fetch == "False" %}
        {% with page_num=page|stringformat:"s" %}
            {% with url=request_url|add:"?page="|add:page_num|add:"&auto_fetch="|add:auto_fetch %}
                {% button label=_('Load more') size='l' extra_classes='mx-auto' hx_get=url hx_swap='outerHTML' hx_trigger='click' %}
            {% endwith %}
        {% endwith %}
    {% else %}
        <div
            hx-get="{{ request_url }}?page={{ page }}&auto_fetch={{ auto_fetch }}"
            hx-trigger="revealed"
            hx-swap="outerHTML"
            class="py-4 text-center"
        >
            <div class="inline-flex items-center px-4 py-2 text-sm text-insight-body">
                <svg class="animate-spin mr-3 -ml-1 w-5 h-5" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
                {% trans "Load more content..." %}
            </div>
        </div>
    {% endif %}
{% else %}
    <div>
        <p class="py-4 text-center text-insight-body">{% trans 'All content loaded.' %}</p>
    </div>
{% endif %}