{% load ui_classes ui_props %}

<c-vars id="ui-sidebar"
        side="left"
        sticky="True"
        collapse="mobile"
        open="False"
        stashed="False"
        persist="True"
        width="16rem"
        min_width="12rem"
        max_width="28rem"
        mobile="18rem"
        breakpoint="lg"
        edge_reveal="True"
        resizable="False"
        class="" />
{% ui_class "ui.sidebar" "root" side=side sticky=sticky class=class as root_class %}
{% ui_class "ui.sidebar" "edge" side=side as edge_class %}
{% ui_class "ui.sidebar" "resizeHandle" side=side as resize_handle_class %}
<div id="{{ id }}"
     x-data="UiSidebar"
     {% if resizable|ui_bool %}x-ui-resizable{% endif %}
     x-bind="root"
     data-ui-sidebar
     data-state="{% if open|ui_bool %}open{% else %}closed{% endif %}"
     data-mobile-state="{% if open|ui_bool %}open{% else %}closed{% endif %}"
     data-desktop-state="{% if stashed|ui_bool %}stashed{% else %}expanded{% endif %}"
     data-drawer-state="{% if open|ui_bool %}open{% else %}closed{% endif %}"
     data-sidebar-exiting="false"
     data-side="{{ side }}"
     data-sticky="{% if sticky|ui_bool %}true{% else %}false{% endif %}"
     data-collapse="{{ collapse }}"
     data-open="{{ open }}"
     data-stashed="{{ stashed }}"
     data-persist="{{ persist }}"
     data-width="{{ width }}"
     data-min-width="{{ min_width }}"
     data-max-width="{{ max_width }}"
     data-mobile="{{ mobile }}"
     data-breakpoint="{{ breakpoint }}"
     data-edge-reveal="{{ edge_reveal }}"
     data-resizable="{{ resizable }}"
     {% if resizable|ui_bool %}data-resize-axis="x" data-resize-min="{{ min_width }}" data-resize-max="{{ max_width }}" data-resize-mode="onChange" data-resize-hit-area="8" data-resize-coarse-hit-area="24"{% endif %}
     data-class="{{ class }}"
     style="--ui-sidebar-width: {{ width }};
            --ui-sidebar-mobile-width: {{ mobile }}"
     class="{{ root_class }}"
     {{ attrs }}>
    {{ slot }}
    {% if resizable|ui_bool %}
        <span x-ui-resizable:handle
              data-ui-sidebar-resize-handle
              data-ui-resize-handle
              role="separator"
              tabindex="0"
              aria-label="Resize sidebar"
              aria-orientation="vertical"
              class="{{ resize_handle_class }}"></span>
    {% endif %}
</div>
{% if edge_reveal|ui_bool %}
    <button type="button"
            x-data="UiSidebarEdge"
            x-bind="root"
            data-ui-sidebar-edge
            data-target="{{ id }}"
            data-action="open"
            data-side="{{ side }}"
            data-state="hidden"
            aria-label="Open sidebar"
            aria-expanded="false"
            class="{{ edge_class }}"
            hidden></button>
{% endif %}