{% for search_post in search_posts %}
  <form
    hx-post="{{ url_for(
      'calendars.calendar.day.calendar_entries.calendar_entry.add_post',
      slug=post.slug,
      calendar_slug=calendar.slug,
      day=day,
      month=month,
      year=year,
      entry_id=entry.id
    ) }}"
    hx-target="#entry-posts-{{entry.id}}"
    hx-swap="innerHTML"
    class="p-2 hover:bg-stone-50 cursor-pointer rounded text-sm border-b"
  >
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
    <input type="hidden" name="post_id" value="{{ search_post.id }}" />
    <button
      type="submit"
      class="w-full text-left flex items-center gap-2"
      data-confirm
      data-confirm-title="Add post?"
      data-confirm-text="Add {{ search_post.title }} to this entry?"
      data-confirm-icon="question"
      data-confirm-confirm-text="Yes, add it"
      data-confirm-cancel-text="Cancel"
    >
      {% if search_post.feature_image %}
        <img src="{{ search_post.feature_image }}"
             alt="{{ search_post.title }}"
             class="w-8 h-8 rounded-full object-cover flex-shrink-0" />
      {% else %}
        <div class="w-8 h-8 rounded-full bg-stone-200 flex-shrink-0"></div>
      {% endif %}
      <span>{{ search_post.title }}</span>
    </button>
  </form>
{% endfor %}

{# Infinite scroll sentinel #}
{% if page < total_pages|int %}
  <div
    id="post-search-sentinel-{{ page }}"
    hx-get="{{ url_for(
      'calendars.calendar.day.calendar_entries.calendar_entry.search_posts',
      slug=post.slug,
      calendar_slug=calendar.slug,
      day=day,
      month=month,
      year=year,
      entry_id=entry.id,
      q=search_query,
      page=page + 1
    ) }}"
    hx-trigger="intersect once delay:250ms, sentinel:retry"
    hx-swap="outerHTML"
    _="
      init
        if not me.dataset.retryMs then set me.dataset.retryMs to 1000 end

      on sentinel:retry
        remove .hidden from .js-loading in me
        add .hidden to .js-neterr in me
        set me.style.pointerEvents to 'none'
        set me.style.opacity to '0'
        trigger htmx:consume on me
        call htmx.trigger(me, 'intersect')
      end

      def backoff()
        add .hidden to .js-loading in me
        remove .hidden from .js-neterr in me
        set myMs to Number(me.dataset.retryMs)
        if myMs < 10000 then set me.dataset.retryMs to myMs * 2 end
        js setTimeout(() => htmx.trigger(me, 'sentinel:retry'), myMs)
      end

      on htmx:beforeRequest
        set me.style.pointerEvents to 'none'
        set me.style.opacity to '0'
      end

      on htmx:afterSwap
        set me.dataset.retryMs to 1000
      end

      on htmx:sendError     call backoff()
      on htmx:responseError call backoff()
      on htmx:timeout       call backoff()
    "
    role="status"
    aria-live="polite"
    aria-hidden="true"
    class="py-2"
  >
    <div class="text-xs text-center text-stone-400 js-loading">
      Loading more...
    </div>
    <div class="text-xs text-center text-stone-400 js-neterr hidden">
      Connection error. Retrying...
    </div>
  </div>
{% elif search_posts %}
  <div class="py-2 text-xs text-center text-stone-400">
    End of results
  </div>
{% endif %}
