{% load ui_assets ui_classes ui_props %}
{% 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="" />
{% 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" "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 %}
     {% if resizable|ui_bool %}x-ui-resizable{% 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 }}"
     {% if resizable|ui_bool %}data-resize-axis="{% if placement == 'top' %}y{% else %}x{% endif %}" data-resize-direction="{% if placement == 'side' and side == 'right' %}negative{% else %}positive{% endif %}" data-resize-min="{% if placement == 'top' %}var(--spacing-sidebar-min-height){% else %}var(--spacing-sidebar-min-width){% endif %}" data-resize-max="{% if placement == 'top' %}var(--spacing-sidebar-max-height){% else %}var(--spacing-sidebar-max-width){% endif %}" data-resize-mode="onChange" data-resize-hit-area="8" data-resize-coarse-hit-area="24"{% endif %}
     data-class="{{ class }}"
     class="group/sidebar {{ root_class }}"
     {{ attrs }}>
    {% if persist|ui_bool %}
    <script>
    (() => {
        const sidebar = document.currentScript?.parentElement;
        if (!sidebar?.matches("[data-ui-sidebar]")) return;
        let stored = null;
        try {
            stored = localStorage.getItem(`trellis-ui-sidebar:${sidebar.id}:stashed`);
        } catch {
            return;
        }
        if (stored !== "true" && stored !== "false") return;
        const state = stored === "true" ? "stashed" : "expanded";
        sidebar.dataset.desktopState = state;
        sidebar.closest("[data-ui-app]")?.setAttribute("data-sidebar-state", state);
    })();
    </script>
    {% endif %}
    {{ 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="{% 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 %}