{% load i18n insight_tags %}

<div
  {% if infinite_scroll_config.tag_id %}id="{{ infinite_scroll_config.tag_id }}"{% endif %}
  {% if infinite_scroll_config.auto_fetch %}
    hx-get="{{ infinite_scroll_config.request_url }}?page={{ infinite_scroll_config.page }}"
    hx-swap="afterend"
    hx-trigger="revealed threshold:{{ threshold|default:100 }}px"
  {% endif %}
  role="feed"
  aria-live="polite"
  aria-busy="false"
>
  {# Feed items must be direct article children of the feed landmark. #}
  {% for item in infinite_scroll_config.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 not infinite_scroll_config.auto_fetch %}
    {% with page_num=infinite_scroll_config.page|stringformat:"s" %}
      {% with url=infinite_scroll_config.request_url|add:"?page="|add:page_num|add:"&auto_fetch="|add:infinite_scroll_config.auto_fetch %}
        {% button label=_('Load more') size='l' extra_classes='mx-auto' hx_get=url hx_swap='outerHTML' hx_trigger='click' hx_indicator='.htmx-indicator' %}
      {% endwith %}
    {% endwith %}
  {% endif %}

  {# Loading Indicator #}
  <div class="htmx-indicator" role="status">
    <div class="flex justify-center items-center py-4">
      <div class="animate-spin w-6 h-6 border-b-2 border-insight-primary rounded-insight-full" aria-hidden="true"></div>
      <span class="ml-2 text-sm text-insight-body">{% trans 'More content is loading...' %}</span>
    </div>
  </div>
</div>