{% load ui_assets ui_classes ui_props ui_preferences %}
{% ui_require_asset "trellis:sidebar" %}

<c-vars as="div"
        id="ui-sidebar"
        placement="side"
        mobile_presentation="drawer"
        side="left"
        surface="inherit"
        elevation="none"
        drawer_elevation="2"
        divider="True"
        sticky="True"
        collapse="mobile"
        open="False"
        stashed="False"
        persist="True"
        edge_reveal="True"
        resizable="False"
        class="" />
{% if persist|ui_bool and placement == "side" %}
    {% ui_preference "sidebars" id stashed as stashed %}
{% endif %}
{% ui_class "ui.sidebar" "root" elevation=elevation drawerElevation=drawer_elevation mobilePresentation=mobile_presentation divider=divider side=side sticky=sticky class=class as root_class %}
{% ui_class "ui.sidebar" "body" as body_class %}
{% ui_class "ui.sidebar" "edge" side=side as edge_class %}
{% ui_class "ui.sidebar" "resizeHandle" side=side as resize_handle_class %}
<{{ as }} id="{{ id }}"
     x-data="UiSidebar"
     {% if "x-ui-transition:opening" not in attrs %}x-ui-transition:opening="transitionSidebar($transition)"{% endif %}
     {% if "x-ui-transition:closing" not in attrs %}x-ui-transition:closing="transitionSidebar($transition)"{% endif %}
     x-bind="root"
     data-ui-sidebar
     data-ui-substrate="chrome"
     data-placement="{{ placement }}"
     data-mobile-presentation="{{ mobile_presentation }}"
     data-ui-surface="{{ surface }}"
     data-ui-elevation="{{ elevation }}"
     data-ui-drawer-elevation="{{ drawer_elevation }}"
     data-divider="{{ divider }}"
     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-edge-reveal="{{ edge_reveal }}"
     data-resizable="{{ resizable }}"
     data-class="{{ class }}"
     class="group/sidebar {{ root_class }}"
     {{ attrs }}>
    <div data-ui-sidebar-body class="{{ body_class }}">{{ slot }}</div>
    {% if resizable|ui_bool %}
        <span data-ui-sidebar-resize-handle
              data-ui-resize-handle
              data-resize-edge="{% if placement == 'top' or side == 'left' %}end{% else %}start{% endif %}"
              role="separator"
              tabindex="0"
              aria-label="Resize sidebar"
              aria-orientation="{% if placement == 'top' %}horizontal{% else %}vertical{% endif %}"
              class="{{ resize_handle_class }}"></span>
    {% endif %}
</{{ as }}>
{% if edge_reveal|ui_bool %}
    <button id="{{ id }}-edge"
            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 %}