{# Project drawer — desktop only, toggled via Alpine event from sidebar button #}

{% load mptt_tags %}

<div x-data="{
        _key: 'lara-drawer:' + location.pathname,
        drawerOpen: false,
        init() { this.drawerOpen = localStorage.getItem(this._key) === '1' },
        toggle() { this.drawerOpen = !this.drawerOpen; localStorage.setItem(this._key, this.drawerOpen ? '1' : '0') }
     }"
     @toggle-drawer.window="toggle()"
     class="hidden lg:block">

    {# Drawer panel — slides width between 0 and 16rem #}
    <div :class="drawerOpen ? 'w-64' : 'w-0'"
         class="z-20 h-[calc(100vh-4rem)] transition-[width] duration-300
                bg-white shadow-lg overflow-hidden">

        <div class="flex-shrink-0">
            <div class="px-4 pt-4 border-b">
                <h2 class="pb-4 font-semibold">Projects</h2>
            </div>
        </div>

        <div class="px-6 py-4"
             hx-get="{% url 'lara_django_base:drawer_projects' %}"
             hx-trigger="load"
             hx-swap="innerHTML"
             hx-indicator="#spinner">
            {# Project tree is lazy-loaded via htmx; spinner shows while in flight. #}
            {% include 'lara_django_base/partials/spinner.html' %}
        </div>
    </div>
</div>