{% load i18n crispy_forms_tags %}

<form hx-post="{% if form_action_url %}{{ form_action_url }}{% else %}{% url 'htmx_calendar:add_event' calendar_slug=calendar.slug %}{% endif %}"
      hx-target="#dialog"
      hx-swap="innerHTML"
      hx-encoding="multipart/form-data"
      data-cal-event-form
      data-cal-unavailable-title="{% trans "Not available" %}">
  <div class="flex items-center justify-between border-b border-gray-200 px-6 py-4">
    <h2 class="text-base font-semibold text-gray-900">
      {% if modal_title %}
        {{ modal_title }}
      {% else %}
        {% trans "Add event" %}
      {% endif %}
      — {{ calendar.name }}
    </h2>
    <button type="button"
            class="text-gray-400 hover:text-gray-500"
            aria-label="{% trans 'Close' %}"
            onclick="window.dispatchEvent(new CustomEvent('close-modal'))">
      <svg xmlns="http://www.w3.org/2000/svg"
           fill="none"
           viewBox="0 0 24 24"
           stroke-width="1.5"
           stroke="currentColor"
           class="size-6">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
      </svg>
    </button>
  </div>
  <div class="px-6 py-4">
    {% if can_edit %}
      {% crispy form %}
    {% else %}
      <fieldset disabled>
        {% crispy form %}
      </fieldset>
    {% endif %}
  </div>
  {% if can_edit %}
    <div class="flex items-center justify-between border-t border-gray-200 px-6 py-4">
      <div>
        {% if event_pk %}
          <button type="button"
                  hx-post="{% url 'htmx_calendar:delete_event' calendar_slug=calendar.slug event_pk=event_pk %}"
                  hx-confirm="{% trans 'Delete this event?' %}"
                  class="rounded-md px-3 py-2 text-sm font-semibold text-red-600 ring-1 ring-inset ring-red-300 hover:bg-red-50">
            {% trans "Delete" %}
          </button>
        {% endif %}
      </div>
      <div class="flex gap-3">
        <button type="button"
                class="rounded-md px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
                onclick="window.dispatchEvent(new CustomEvent('close-modal'))">{% trans "Cancel" %}</button>
        <button type="submit"
                class="rounded-md bg-accent px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-accent/80">
          {% trans "Save" %}
        </button>
      </div>
    </div>
  {% endif %}
</form>