<div id="post-entries-content" class="space-y-6 p-4">

  {# Associated Entries List #}
  {% include '_types/post/admin/_associated_entries.html' %}

  {# Calendars Browser #}
  <div class="space-y-3">
    <h3 class="text-lg font-semibold">Browse Calendars</h3>
    {% for calendar in all_calendars %}
      <details class="border rounded-lg bg-white"
               _="on toggle
                  if my.open
                    for other in <details[open]/>
                      if other is not me
                        set other.open to false
                      end
                    end
                  end">
        <summary class="p-4 cursor-pointer hover:bg-stone-50 flex items-center gap-3">
          {% if calendar.post.feature_image %}
            <img src="{{ calendar.post.feature_image }}"
                 alt="{{ calendar.post.title }}"
                 class="w-12 h-12 rounded object-cover flex-shrink-0" />
          {% else %}
            <div class="w-12 h-12 rounded bg-stone-200 flex-shrink-0"></div>
          {% endif %}
          <div class="flex-1">
            <div class="font-semibold flex items-center gap-2">
              <i class="fa fa-calendar text-stone-500"></i>
              {{ calendar.name }}
            </div>
            <div class="text-sm text-stone-600">
              {{ calendar.post.title }}
            </div>
          </div>
        </summary>
        <div class="p-4 border-t"
             hx-get="{{ url_for('blog.post.admin.calendar_view', slug=post.slug, calendar_id=calendar.id) }}"
             hx-trigger="intersect once"
             hx-swap="innerHTML">
          <div class="text-sm text-stone-400">Loading calendar...</div>
        </div>
      </details>
    {% else %}
      <div class="text-sm text-stone-400">No calendars found.</div>
    {% endfor %}
  </div>
</div>