<div id="calendar-view-{{ calendar.id }}"
     hx-get="{{ url_for('blog.post.admin.calendar_view', slug=post.slug, calendar_id=calendar.id, year=year, month=month) }}"
     hx-trigger="entryToggled from:body"
     hx-swap="outerHTML">
  {# Month/year navigation #}
  <header class="flex items-center justify-center mb-4">
    <nav class="flex items-center gap-2 text-xl">
      <a class="px-2 py-1 hover:bg-stone-100 rounded" href="?calendar_id={{ calendar.id }}&year={{ prev_year }}&month={{ month }}" hx-get="{{ url_for('blog.post.admin.calendar_view', slug=post.slug, calendar_id=calendar.id, year=prev_year, month=month) }}" hx-target="#calendar-view-{{ calendar.id }}" hx-swap="outerHTML">&laquo;</a>
      <a class="px-2 py-1 hover:bg-stone-100 rounded" href="?calendar_id={{ calendar.id }}&year={{ prev_month_year }}&month={{ prev_month }}" hx-get="{{ url_for('blog.post.admin.calendar_view', slug=post.slug, calendar_id=calendar.id, year=prev_month_year, month=prev_month) }}" hx-target="#calendar-view-{{ calendar.id }}" hx-swap="outerHTML">&lsaquo;</a>
      <div class="px-3 font-medium">{{ month_name }} {{ year }}</div>
      <a class="px-2 py-1 hover:bg-stone-100 rounded" href="?calendar_id={{ calendar.id }}&year={{ next_month_year }}&month={{ next_month }}" hx-get="{{ url_for('blog.post.admin.calendar_view', slug=post.slug, calendar_id=calendar.id, year=next_month_year, month=next_month) }}" hx-target="#calendar-view-{{ calendar.id }}" hx-swap="outerHTML">&rsaquo;</a>
      <a class="px-2 py-1 hover:bg-stone-100 rounded" href="?calendar_id={{ calendar.id }}&year={{ next_year }}&month={{ month }}" hx-get="{{ url_for('blog.post.admin.calendar_view', slug=post.slug, calendar_id=calendar.id, year=next_year, month=month) }}" hx-target="#calendar-view-{{ calendar.id }}" hx-swap="outerHTML">&raquo;</a>
    </nav>
  </header>

  {# Calendar grid #}
  <div class="rounded border bg-white">
    <div class="hidden sm:grid grid-cols-7 text-center text-xs font-semibold text-stone-700 bg-stone-50 border-b">
      {% for wd in weekday_names %}
        <div class="py-2">{{ wd }}</div>
      {% endfor %}
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-7 gap-px bg-stone-200">
      {% for week in weeks %}
        {% for day in week %}
          <div class="min-h-20 bg-white px-2 py-2 text-xs {% if not day.in_month %} bg-stone-50 text-stone-400{% endif %}">
            <div class="font-medium mb-1">{{ day.date.day }}</div>

            {# Entries for this day #}
            <div class="space-y-0.5">
              {% for e in month_entries %}
                {% if e.start_at.date() == day.date %}
                  {% if e.id in associated_entry_ids %}
                    {# Associated entry - show with delete button #}
                    <div class="flex items-center gap-1 text-[10px] rounded px-1 py-0.5 bg-green-200 text-green-900">
                      <span class="truncate flex-1">{{ e.name }}</span>
                      <button
                        type="button"
                        class="flex-shrink-0 hover:text-red-600"
                        data-confirm
                        data-confirm-title="Remove entry?"
                        data-confirm-text="Remove {{ e.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=e.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"
                      >
                        <i class="fa fa-times"></i>
                      </button>
                    </div>
                  {% else %}
                    {# Non-associated entry - clickable to add #}
                    <button
                      type="button"
                      class="w-full text-left text-[10px] rounded px-1 py-0.5 bg-stone-100 text-stone-700 hover:bg-stone-200"
                      data-confirm
                      data-confirm-title="Add entry?"
                      data-confirm-text="Add {{ e.name }} to this post?"
                      data-confirm-icon="question"
                      data-confirm-confirm-text="Yes, add it"
                      data-confirm-cancel-text="Cancel"
                      data-confirm-event="confirmed"
                      hx-post="{{ url_for('blog.post.admin.toggle_entry', slug=post.slug, entry_id=e.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"
                    >
                      <span class="truncate block">{{ e.name }}</span>
                    </button>
                  {% endif %}
                {% endif %}
              {% endfor %}
            </div>
          </div>
        {% endfor %}
      {% endfor %}
    </div>
  </div>
</div>
