{% if not dialog_only %}
  <button class="btn {{ button_class|default:"btn-primary" }}{% if button_tooltip %} tooltip tooltip-bottom{% endif %}"
          {% if button_tooltip %}data-tip="{{ button_tooltip }}"{% endif %}
          onclick="htmx.find('#{{ dialog_id }}').showModal()">
    {% if button_icon %}
      <i class="{{ button_icon }}"></i>
    {% else %}
      {{ button_title }}
    {% endif %}
  </button>
{% endif %}
<dialog id="{{ dialog_id }}" class="modal">
  <div class="modal-box card card-compact shadow-xl loading-box">
    <div class="w-full">
      <div class="divider divider-start">
        <h3 class="card-title">{{ header }}</h3>
      </div>
      <form id="{{ dialog_id }}-form"
            {% block form_control %}
            method="post"
            action="{{ endpoint }}"
            {% endblock form_control %}>
        {% csrf_token %}
        <fieldset class="flex flex-col gap-4">
          <legend class="antialiased text-base font-normal py-2">{{ explanation }}</legend>
          {% block dialogform %}
          {% endblock dialogform %}
        </fieldset>
      </form>
      <div class="modal-action card-actions">
        <form method="dialog" class="w-full">
          <div class="divider divider-end">
            <button type="submit" form="{{ dialog_id }}-form" class="btn btn-primary">
              <span>{{ submit_text }}</span>
            </button>
            <button class="btn">{{ cancel_text }}</button>
          </div>
        </form>
      </div>
    </div>
    <div class="htmx-indicator loading loading-spinner text-primary"></div>
  </div>
  <form method="dialog" class="modal-backdrop">
    <button>close</button>
  </form>
</dialog>