<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" method="post" action="{{ endpoint }}">
            {% 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>
