{% if pages %}
  <div class="border border-stone-200 rounded-md max-h-64 overflow-y-auto">
    {% for post in pages %}
      <div
        class="flex items-center gap-3 p-3 hover:bg-stone-50 cursor-pointer border-b last:border-b-0"
        data-page-id="{{ post.id }}"
        data-page-title="{{ post.title }}"
        data-page-slug="{{ post.slug }}"
        data-page-image="{{ post.feature_image or '' }}">

        {# Page image #}
        {% if post.feature_image %}
          <img src="{{ post.feature_image }}"
               alt="{{ post.title }}"
               class="w-10 h-10 rounded-full object-cover flex-shrink-0" />
        {% else %}
          <div class="w-10 h-10 rounded-full bg-stone-200 flex-shrink-0"></div>
        {% endif %}

        {# Page info #}
        <div class="flex-1 min-w-0">
          <div class="font-medium truncate">{{ post.title }}</div>
          <div class="text-xs text-stone-500 truncate">{{ post.slug }}</div>
        </div>
      </div>
    {% endfor %}

    {# Infinite scroll sentinel #}
    {% if has_more %}
      <div
        hx-get="{{ url_for('menu_items.search_pages_route') }}"
        hx-trigger="intersect once"
        hx-swap="outerHTML"
        hx-vals='{"q": "{{ query }}", "page": {{ page + 1 }}}'
        class="p-3 text-center text-sm text-stone-400">
        <i class="fa fa-spinner fa-spin"></i> Loading more...
      </div>
    {% endif %}
  </div>
{% elif query %}
  <div class="p-3 text-center text-stone-400 border border-stone-200 rounded-md">
    No pages found matching "{{ query }}"
  </div>
{% endif %}
