<section class="p-4">
    {% if has_access('calendars.create_calendar') %}
      <!-- error container under the inputs -->
      <div id="cal-create-errors" class="mt-2 text-sm text-red-600"></div>

      <form
        class="mt-4 flex gap-2 items-end"
        hx-post="{{ url_for('calendars.create_calendar', slug=post.slug) }}"
        hx-target="#calendars-list"
        hx-select="#calendars-list"
        hx-swap="outerHTML"
        hx-on::before-request="document.querySelector('#cal-create-errors').textContent='';"
        hx-on::response-error="document.querySelector('#cal-create-errors').innerHTML = event.detail.xhr.responseText;"
      >
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <div class="flex-1">
          <label class="block text-sm text-gray-600">Name</label>
          <input name="name" type="text" required class="w-full border rounded px-3 py-2" placeholder="e.g. Events, Gigs, Meetings" />
        </div>
        <button type="submit" class="border rounded px-3 py-2">Add calendar</button>
      </form>
    {% endif %}
    <!-- list -->
    <div id="calendars-list" class="mt-6">
      {% include "_types/calendars/_calendars_list.html" %}
    </div>
  </section>