{% comment %}
Drawer component.
Parameters:
- id : unique identifier for the drawer (required)
- side : drawer side - "left", "right" (default: "right")
- size : drawer size - "sm", "md", "lg", "xl", "full" (default: "md")
- backdrop : whether to show the modal-style backdrop (default: True)
- backdrop_click_close : close drawer when clicking backdrop (default: True)
- portal_to_body : render outside ancestor stacking contexts while open (default: False)
- class, style : custom overlay styling
- panel_class, panel_style : custom panel styling
- slot : main content of the drawer
{% endcomment %}

<c-vars id="" side="right" size="md" portal_to_body="False" class="" style="" panel_class="" panel_style="" backdrop="True" backdrop_click_close="True" lock_scroll="True" />
<div
    id="{{ id }}"
    class="fixed inset-0 z-[90] hidden items-stretch {{ class }}
        {% with backdrop_value=backdrop %}
            {% if backdrop_value == False or backdrop_value == 'False' or backdrop_value == 'false' %}
                bg-transparent
            {% else %}
                bg-black/50
            {% endif %}
        {% endwith %}
        {% if side == 'left' %}
            justify-start
        {% else %}
            justify-end
        {% endif %}
    "
    style="{{ style }}"
    {{ attrs }}
    bloomerp-component="drawer"
    data-portal-to-body="{{ portal_to_body|default:False|lower }}"
    data-side="{{ side|default:'right' }}"
    data-backdrop="{{ backdrop|lower }}"
    data-lock-scroll="{{ lock_scroll|lower }}"
    data-backdrop-click-close="{{ backdrop_click_close|lower }}"
>
    <div
        id="{{ id }}-panel"
        data-drawer-panel
        class="
            {{ panel_class }} h-full bg-white shadow-xl overflow-y-auto
            {% if size == 'sm' %}
                max-w-sm w-full
            {% elif size == 'lg' %}
                max-w-lg w-full
            {% elif size == 'xl' %}
                max-w-xl w-full
            {% elif size == 'full' %}
                max-w-full w-full
            {% else %}
                max-w-md w-full
            {% endif %}
            transform transition-transform duration-200 ease-out
            {% if side == 'left' %}
                -translate-x-full
            {% else %}
                translate-x-full
            {% endif %}
        "
        style="{{ panel_style }}"
    >
        {{ slot }}
    </div>
</div>