<button class="btn {{ button_class|default:"btn-primary" }}"
        onclick="htmx.find('#{{ dialog_id }}').showModal()">{{ button_title }}</button>
<dialog id="{{ dialog_id }}" class="modal">
  <div class="modal-box card card-compact shadow-xl">
    <div class="divider divider-start">
      <h3 class="card-title">{{ header }}</h3>
    </div>
    <form id="{{ dialog_id }}-form"
          class="card-body"
          {% block form_control %}
          method="post"
          action="{{ endpoint }}"
          {% endblock form_control %}>
      {% csrf_token %}
      <fieldset class="menu menu-vertical gap-4">
        <legend class="antialiased text-base font-bold 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 {{ button_class|default:"btn-primary" }}">{{ submit_text }}</button>
          <button class="btn">{{ cancel_text }}</button>
        </div>
      </form>
    </div>
  </div>
  <form method="dialog" class="modal-backdrop">
    <button>close</button>
  </form>
</dialog>
