<div id="associated-entries-list" class="border rounded-lg p-4 bg-white">
  <h3 class="text-lg font-semibold mb-4">Associated Entries</h3>
  {% if associated_entry_ids %}
    <div class="space-y-1">
      {% for calendar in all_calendars %}
        {% for entry in calendar.entries %}
          {% if entry.id in associated_entry_ids and entry.deleted_at is none %}
            <button
              type="button"
              class="w-full text-left p-3 rounded border bg-green-50 border-green-300 transition hover:bg-green-100"
              data-confirm
              data-confirm-title="Remove entry?"
              data-confirm-text="This will remove {{ entry.name }} from this post"
              data-confirm-icon="warning"
              data-confirm-confirm-text="Yes, remove it"
              data-confirm-cancel-text="Cancel"
              data-confirm-event="confirmed"
              hx-post="{{ url_for('blog.post.admin.toggle_entry', slug=post.slug, entry_id=entry.id) }}"
              hx-trigger="confirmed"
              hx-target="#associated-entries-list"
              hx-swap="outerHTML"
              hx-headers='{"X-CSRFToken": "{{ csrf_token() }}"}'
              _="on htmx:afterRequest trigger entryToggled on body"
            >
              <div class="flex items-center justify-between gap-3">
                {% if calendar.post.feature_image %}
                  <img src="{{ calendar.post.feature_image }}"
                       alt="{{ calendar.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 %}
                <div class="flex-1">
                  <div class="font-medium text-sm">{{ entry.name }}</div>
                  <div class="text-xs text-stone-600 mt-1">
                    {{ calendar.name }} • {{ entry.start_at.strftime('%A, %B %d, %Y at %H:%M') }}
                    {% if entry.end_at %} – {{ entry.end_at.strftime('%H:%M') }}{% endif %}
                  </div>
                </div>
                <i class="fa fa-times-circle text-green-600 text-lg flex-shrink-0"></i>
              </div>
            </button>
          {% endif %}
        {% endfor %}
      {% endfor %}
    </div>
  {% else %}
    <div class="text-sm text-stone-400">No entries associated yet. Browse calendars below to add entries.</div>
  {% endif %}
</div>
