{% macro render_modal(id, title, action_url, render_modal_form, action_text = none, action_class = "btn-primary", size_class = "", posts = true) %}
    {# posts=false marks a JS-handled form (submitted via fetch, not the server):
       it renders no method/action and is flagged data-js-form so modal.js stops the
       default submit — so a missed preventDefault can't navigate the page. #}
    <div id="{{id}}" class="modal">
    <div class="modal-content {{size_class}}">
        <div class="modal-header">
            <h2 id="{{id}}Title">{{title}}</h2>
            <button type="button" class="modal-close" name="cancel" aria-label="{{ _('Close') }}">&times;</button>
        </div>
        <form id="{{id}}Form" {% if posts %}method="POST" action="{{ action_url }}"{% else %}data-js-form{% endif %}>
            <div class="modal-body thin-scrollbar">
                {{ render_modal_form() }}
            </div>
            <div class="modal-actions">
                <button type="button" class="btn btn-secondary" name="cancel">{{ _("Cancel") }}</button>
                <button type="submit" class="btn {{action_class}}">{{ action_text or _("Save") }}</button>
            </div>
        </form>
    </div>
    </div>
{% endmacro %}