{% load static %}

{# Mobile-first sidebar: slide-over overlay on mobile, slim hover-expand on desktop #}
<div x-data="{ open: false }"
     @toggle-sidebar.window="open = !open"
     @sidebar-open.window="open = true"
     @sidebar-close.window="open = false"
     @keydown.escape.window="open = false"
     id="sidebar-wrapper">

    {# ── Backdrop (mobile only) ── #}
    <div x-show="open"
         x-transition:enter="transition-opacity duration-300 ease-out"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="transition-opacity duration-200 ease-in"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         @click="open = false"
         class="fixed inset-0 bg-black/40 z-40 lg:hidden"
         style="display: none;"></div>

    {# ── Sidebar panel ── #}
    <aside id="sidebar"
           :class="{ 'sidebar-open': open }"
           class="bg-base-200">

        {# — Mobile header — #}
        <div class="flex items-center justify-between p-4 sm:p-5 border-b border-base-300 lg:hidden">
            <div class="flex items-center gap-3">
                <img src="{% static 'lara_django_base/icons/LARA_logo.svg' %}"
                     alt="LARA" class="w-7 h-7 sm:w-8 sm:h-8" />
                <span class="text-xl sm:text-2xl font-semibold">LARA</span>
            </div>
            <button @click="open = false"
                    class="btn btn-ghost btn-circle"
                    aria-label="Close navigation">
                <svg class="w-6 h-6 sm:w-7 sm:h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round"
                          stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                </svg>
            </button>
        </div>

        {# — Mobile user info — #}
        <div class="lg:hidden flex items-center gap-3 px-4 sm:px-5 py-3 sm:py-4 bg-base-300/40">
            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-full overflow-hidden bg-base-300 flex-shrink-0">
                <img src="{{ request.user.profile_image }}" alt="avatar"
                     class="w-full h-full object-cover" />
            </div>
            <p class="text-sm sm:text-base font-medium truncate">
                {{ request.user.get_full_name|default:request.user.username }}
            </p>
        </div>

        {# — Desktop: round button toggles the project drawer — #}
        <div class="hidden lg:flex items-center justify-center p-3 xl:p-4
                    drawer-toggle-btn-wrap">
            <button @click="window.dispatchEvent(new CustomEvent('toggle-drawer'))"
                    class="bg-slate-400 hover:bg-slate-600 text-white rounded-full p-2.5 xl:p-3
                           transition-colors duration-150 cursor-pointer"
                    aria-label="Toggle project drawer"
                    title="Toggle project drawer">
                <svg class="w-5 h-5 xl:w-6 xl:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round"
                          stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
                </svg>
            </button>
        </div>

        {# — Primary navigation — #}
        <nav class="py-2">
            {% for item in sidebar_menu_items %}
            <a href="{{ item.path }}"
               hx-get="{{ item.path }}"
               hx-target="#main-content"
               hx-swap="innerHTML show:window:top"
               hx-push-url="true"
               @click="open = false"
               class="sidebar-item flex items-center gap-3 sm:gap-4 px-4 py-3.5 sm:py-4 mx-1 rounded-lg
                      text-base-content/80 hover:text-white
                      transition-colors duration-150 {{ item.hover_class }}">
                <svg class="flex-shrink-0 w-7 h-7 sm:w-7 sm:h-7"
                     role="img" aria-label="{{ item.name }}">
                    <use xlink:href="{% static 'lara_django_base/icons/symbols.svg' %}#{{ item.icon }}" />
                </svg>
                <span class="sidebar-label whitespace-nowrap text-base sm:text-base font-medium">{{ item.name }}</span>
            </a>
            {% endfor %}
        </nav>

        {# — Mobile: page-level menu items (from navbar) — #}
        {% if menu_items %}
        <div class="lg:hidden border-t border-base-300 py-2">
            <p class="px-4 py-2 text-sm font-semibold text-base-content/50 uppercase tracking-wider">Pages</p>
            {% for menu_item in menu_items %}
            <a href="{% url menu_item.path %}"
               hx-get="{% url menu_item.path %}"
               hx-target="#main-content"
               hx-swap="innerHTML show:window:top"
               hx-push-url="true"
               @click="open = false"
               class="flex items-center gap-3 sm:gap-4 px-4 sm:px-5 py-3 sm:py-3.5
                      text-base-content/70 hover:bg-base-300 hover:text-base-content
                      transition-colors duration-150">
                <svg class="flex-shrink-0 w-5 h-5 sm:w-6 sm:h-6 text-base-content/40" fill="none"
                     stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round"
                          stroke-width="2" d="M9 5l7 7-7 7" />
                </svg>
                <span class="text-sm sm:text-base">{{ menu_item.name }}</span>
            </a>
            {% endfor %}
        </div>
        {% endif %}

        {# — Mobile: projects tree (lazy-loaded) — #}
        <div class="lg:hidden border-t border-base-300 py-2"
             x-data="{ projectsOpen: false, loaded: false }">
            <button @click="projectsOpen = !projectsOpen; if (!loaded) { loaded = true; $nextTick(() => htmx.trigger('#mobile-projects-tree', 'load-projects')) }"
                    class="flex items-center justify-between w-full px-4 sm:px-5 py-3.5 sm:py-4
                           text-base-content/80 hover:bg-base-300 transition-colors duration-150">
                <span class="text-sm sm:text-base font-semibold uppercase tracking-wider text-base-content/50">Projects</span>
                <svg :class="projectsOpen && 'rotate-180'"
                     class="w-5 h-5 sm:w-6 sm:h-6 transition-transform duration-200"
                     fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round"
                          stroke-width="2" d="M19 9l-7 7-7-7" />
                </svg>
            </button>
            <div x-show="projectsOpen"
                 x-transition:enter="transition-all duration-200 ease-out"
                 x-transition:enter-start="opacity-0 -translate-y-1"
                 x-transition:enter-end="opacity-100 translate-y-0"
                 x-transition:leave="transition-all duration-150 ease-in"
                 x-transition:leave-start="opacity-100 translate-y-0"
                 x-transition:leave-end="opacity-0 -translate-y-1"
                 id="mobile-projects-tree"
                 class="px-4 pb-2 text-sm"
                 hx-get="{% url 'lara_django_base:drawer_projects' %}"
                 hx-trigger="load-projects"
                 hx-swap="innerHTML"
                 hx-indicator="#spinner">
                {% include 'lara_django_base/partials/spinner.html' %}
            </div>
        </div>

        {# — Mobile: tools quick access — #}
        <div class="lg:hidden border-t border-base-300 py-2">
            <p class="px-4 py-2 text-sm font-semibold text-base-content/50 uppercase tracking-wider">Tools</p>
            <a href="{% url 'lara_django_base:jupyter_lite_ui' %}" @click="open = false"
               class="flex items-center gap-3 px-4 sm:px-5 py-3 sm:py-3.5 text-sm sm:text-base text-base-content/70 hover:bg-base-300 transition-colors">
                Jupyter Lite
            </a>
            <a href="{% url 'lara_django_base:zotero_ui' %}" @click="open = false"
               class="flex items-center gap-3 px-4 sm:px-5 py-3 sm:py-3.5 text-sm sm:text-base text-base-content/70 hover:bg-base-300 transition-colors">
                LARA-Zotero
            </a>
            <a href="{% url 'lara_django_base:grafana_ui' %}" @click="open = false"
               class="flex items-center gap-3 px-4 sm:px-5 py-3 sm:py-3.5 text-sm sm:text-base text-base-content/70 hover:bg-base-300 transition-colors">
                Grafana
            </a>
            {% if PREFECT_DASHBOARD_URL %}
            <a href="{% url 'lara_django_base:prefect_ui' %}" @click="open = false"
               class="flex items-center gap-3 px-4 sm:px-5 py-3 sm:py-3.5 text-sm sm:text-base text-base-content/70 hover:bg-base-300 transition-colors">
                Prefect
            </a>
            {% endif %}
            {% if VIRTUOSO_SPARQL_URL %}
            <a href="{% url 'lara_django_base:sparql_ui' %}" @click="open = false"
               class="flex items-center gap-3 px-4 sm:px-5 py-3 sm:py-3.5 text-sm sm:text-base text-base-content/70 hover:bg-base-300 transition-colors">
                SPARQL
            </a>
            {% endif %}
        </div>

        {# — Mobile: admin (staff only) — #}
        {% if request.user.is_staff %}
        <div class="lg:hidden border-t border-base-300 py-2">
            <p class="px-4 py-2 text-sm font-semibold text-base-content/50 uppercase tracking-wider">Admin</p>
            <a href="/admin" @click="open = false"
               class="flex items-center gap-3 px-4 sm:px-5 py-3 sm:py-3.5 text-sm sm:text-base text-base-content/70 hover:bg-base-300 transition-colors">
                Django Admin
            </a>
            <a href="/influxdb" @click="open = false"
               class="flex items-center gap-3 px-4 sm:px-5 py-3 sm:py-3.5 text-sm sm:text-base text-base-content/70 hover:bg-base-300 transition-colors">
                InfluxDB
            </a>
        </div>
        {% endif %}

        {# — Mobile: help & about — #}
        <div class="lg:hidden border-t border-base-300 py-2">
            <a href="{{ LARA_DOCS_URL }}" @click="open = false"
               class="flex items-center gap-3 px-4 sm:px-5 py-3 sm:py-3.5 text-sm sm:text-base text-base-content/70 hover:bg-base-300 transition-colors">
                Help &amp; Docs
            </a>
            <a href="{% url 'lara_django_base:base-about' %}" @click="open = false"
               class="flex items-center gap-3 px-4 sm:px-5 py-3 sm:py-3.5 text-sm sm:text-base text-base-content/70 hover:bg-base-300 transition-colors">
                About LARA
            </a>
        </div>

        {# — Mobile: logout — #}
        <div class="lg:hidden border-t border-base-300 py-2 pb-6">
            <a href="/accounts/logout"
               class="flex items-center gap-3 px-4 sm:px-5 py-3.5 sm:py-4 text-sm sm:text-base text-error hover:bg-error/10 transition-colors">
                <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a2 2 0 01-2 2H6a2 2 0 01-2-2V7a2 2 0 012-2h5a2 2 0 012 2v1" />
                </svg>
                Logout
            </a>
        </div>

    </aside>
</div>

{# ── Touch gesture support for swipe open/close ── #}
<script>
(function () {
    let startX = 0, startY = 0;
    document.addEventListener('touchstart', function (e) {
        startX = e.touches[0].clientX;
        startY = e.touches[0].clientY;
    }, { passive: true });

    document.addEventListener('touchend', function (e) {
        const dx = e.changedTouches[0].clientX - startX;
        const dy = Math.abs(e.changedTouches[0].clientY - startY);
        // Swipe right from left edge → open sidebar
        if (startX < 28 && dx > 60 && dy < 40) {
            window.dispatchEvent(new CustomEvent('sidebar-open'));
        }
        // Swipe left anywhere → close sidebar
        if (dx < -60 && dy < 40) {
            window.dispatchEvent(new CustomEvent('sidebar-close'));
        }
    }, { passive: true });
})();
</script>