  {% for row in calendars %}
    {% set cal = row %}
    <div class="mt-6 border rounded-lg p-4">
      <div class="flex items-center justify-between gap-3">

        {% set calendar_href = url_for('calendars.calendar.get', slug=post.slug, calendar_slug=cal.slug)|host%}
        <a
          class="flex items-baseline gap-3"
          href="{{ calendar_href }}"
          hx-get="{{ calendar_href }}"
          hx-target="#main-panel"
          hx-select ="{{hx_select_search}}"
          hx-swap="outerHTML"
          hx-push-url="true"  
        >
          <h3 class="font-semibold">{{ cal.name }}</h3>
          <h4 class="text-gray-500">/{{ cal.slug }}/</h4>
        </a>

        <!-- Soft delete -->
        <button
          class="text-sm border rounded px-3 py-1 hover:bg-red-50 hover:border-red-400"
          data-confirm
          data-confirm-title="Delete calendar?"
          data-confirm-text="Entries will be hidden (soft delete)"
          data-confirm-icon="warning"
          data-confirm-confirm-text="Yes, delete it"
          data-confirm-cancel-text="Cancel"
          data-confirm-event="confirmed"
          hx-delete="{{ url_for('calendars.calendar.delete', slug=post.slug, calendar_slug=cal.slug) }}"
          hx-trigger="confirmed"
          hx-target="#calendars-list"
          hx-select="#calendars-list"
          hx-swap="outerHTML"
          hx-headers='{"X-CSRFToken":"{{ csrf_token() }}"}'
        >
          <i class="fa-solid fa-trash"></i>
        </button>

      </div>
    </div>
  {% else %}
    <p class="text-gray-500 mt-4">No calendars yet. Create one above.</p>
  {% endfor %}
