
<section class="max-w-3xl mx-auto p-4 space-y-10">
  <!-- Calendar config -->
  <div>
    <h2 class="text-xl font-semibold">Calendar configuration</h2>
    <div id="cal-put-errors" class="mt-2 text-sm text-red-600"></div>
    <div>
      <label class="block text-sm font-medium text-stone-700">
        Description
      </label>
      {% include '_types/calendar/admin/_description.html' %}
    </div>

    <form
      id="calendar-form"
      method="post"
      hx-put="{{ url_for('calendars.calendar.put', slug=post.slug, calendar_slug=calendar.slug ) }}"
      hx-target="#main-panel"
      hx-select="{{ hx_select_search }}"
      hx-on::before-request="document.querySelector('#cal-put-errors').textContent='';"
      hx-on::response-error="document.querySelector('#cal-put-errors').innerHTML = event.detail.xhr.responseText;"
      hx-on::after-request="if (event.detail.successful) this.reset()"

      class="hidden space-y-4 mt-4"
      autocomplete="off"
    >
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <div>
        <label class="block text-sm font-medium text-stone-700">Description</label>
        <div>{{calendar.description or ''}}</div>
        <textarea
          name="description"
          autocomplete="off"
          rows="4" class="w-full p-2 border rounded"
        >{{ (calendar.description or '') }}</textarea>
      </div>

      <div>
        <button class="px-3 py-2 rounded bg-stone-800 text-white">Save</button>
      </div>
    </form>
  </div>

  <hr class="border-stone-200">

  </section>
