{% comment %}
Modal declaration. TypeScript builds the shell in static_src/ts/utils/modals.ts.
All existing modal options and body/footer slots remain supported.
{% endcomment %}
<div
    id="{{ id }}"
    class="hidden"
    bloomerp-component="modal"
    data-modal-title="{{ title|default:'Modal' }}"
    data-modal-size="{{ size|default:'md' }}"
    data-modal-padding="{{ body_padding|default:'p-3' }}"
    data-backdrop-click-close="{% if backdrop_click_close == False or backdrop_click_close == 'false' or backdrop_click_close == 'False' %}false{% else %}true{% endif %}"
    data-modal-closable="{% if closable == False or closable == 'false' or closable == 'False' %}false{% else %}true{% endif %}"
    data-modal-show-header="{% if show_header == False or show_header == 'false' or show_header == 'False' %}false{% else %}true{% endif %}"
    data-modal-show-footer="{{ show_footer|default:False|lower }}"
    data-modal-header-class="{{ header_class }}"
    data-modal-body-class="{{ body_class }}"
    data-modal-footer-class="{{ footer_class }}"
    data-on-close="{{ onclose }}"
>
    <div data-modal-content>{{ slot }}</div>
    <div data-modal-footer-content>{{ footer_slot }}</div>
</div>