{% load lbr_tags %}
<c-vars
    id=""
    size=""
    boxClass=""
    withBackdrop
    withCloseBtn
    closeBtnPosition="top-right"
/>
{% lbr_props "modal" attrs=attrs as rx %}

<dialog
    id="{{ id }}"
    class="{{ rx.classes }}"
    {{ rx.attrs }}
>
    {% if not box %}
        <c-lb.modal.box :size=size :class=boxClass>
            {% if withCloseBtn %}
                <c-lb.modal.close :position=closeBtnPosition />
            {% endif %}
            {{ slot }}
        </c-lb.modal.box>
    {% else %}
        {{ box }}
    {% endif %}

    {% if withBackdrop %}
        <c-lb.modal.backdrop />
    {% endif %}
</dialog>