<!-- Associated Posts Section -->
<div class="space-y-2">
  {% if entry_posts %}
    <div class="space-y-2">
      {% for entry_post in entry_posts %}
        <div class="flex items-center justify-between gap-3 p-2 bg-stone-50 rounded border">
          {% if entry_post.feature_image %}
            <img src="{{ entry_post.feature_image }}"
                 alt="{{ entry_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 class="text-sm flex-1">{{ entry_post.title }}</span>
          <button
            type="button"
            class="text-xs text-red-600 hover:text-red-800 flex-shrink-0"
            data-confirm
            data-confirm-title="Remove post?"
            data-confirm-text="This will remove {{ entry_post.title }} from this entry"
            data-confirm-icon="warning"
            data-confirm-confirm-text="Yes, remove it"
            data-confirm-cancel-text="Cancel"
            data-confirm-event="confirmed"
            hx-delete="{{ url_for(
              'calendars.calendar.day.calendar_entries.calendar_entry.remove_post',
              slug=post.slug,
              calendar_slug=calendar.slug,
              day=day,
              month=month,
              year=year,
              entry_id=entry.id,
              post_id=entry_post.id
            ) }}"
            hx-trigger="confirmed"
            hx-target="#entry-posts-{{entry.id}}"
            hx-swap="innerHTML"
            hx-headers='{"X-CSRFToken": "{{ csrf_token() }}"}'
          >
            <i class="fa fa-times"></i> Remove
          </button>
        </div>
      {% endfor %}
    </div>
  {% else %}
    <p class="text-sm text-stone-400">No posts associated</p>
  {% endif %}

  <!-- Search to add posts -->
  <div class="mt-3 pt-3 border-t">
    <label class="block text-xs font-medium text-stone-700 mb-1">
      Add Post
    </label>
    <input
      type="text"
      placeholder="Search posts..."
      class="w-full px-3 py-2 border rounded text-sm"
      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
      ) }}"
      hx-trigger="keyup changed delay:300ms, load"
      hx-target="#post-search-results-{{entry.id}}"
      hx-swap="innerHTML"
      name="q"
    />
    <div id="post-search-results-{{entry.id}}" class="mt-2 max-h-96 overflow-y-auto border rounded"></div>
  </div>
</div>
