{% load static %}

<div
    class="sticky-top bg-app-side-navigation d-flex flex-column vh-100 w-100"
    x-data="{
        collapsed: JSON.parse(localStorage.getItem('side_nav_collapsed') || 'false'),
        show_top_fade: false,
        show_bottom_fade: false,

        check_scroll() {
            let element = this.$refs.scroll_container;
            let has_scroll = element.scrollHeight > element.clientHeight;
            let is_at_top = element.scrollTop <= 20;
            let is_at_bottom = element.scrollHeight - element.scrollTop <= element.clientHeight + 20;
            this.show_top_fade = has_scroll && !is_at_top;
            this.show_bottom_fade = has_scroll && !is_at_bottom;
        },

        toggle_collapse() {
            this.collapsed = !this.collapsed;
            localStorage.setItem('side_nav_collapsed', JSON.stringify(this.collapsed));
            document.documentElement.style.setProperty(
                '--app-side-navigation-width',
                this.collapsed ? '68px' : '240px'
            );
            this.$nextTick(() => this.check_scroll());
        }
    }"
    x-init="$nextTick(() => { check_scroll(); window.addEventListener('resize', () => check_scroll()); })"
>
    <div class="px-3 d-flex align-items-center gap-2 flex-shrink-0 border-bottom" style="height: 64px;">
        {% block side_navigation_top_content %}
            {% block side_navigation_img %}
                <a href="/" class="d-flex align-items-center gap-2 text-decoration-none p-0 m-0 overflow-hidden">
                    <img
                        src="{% static 'img/django_spire.svg' %}"
                        alt="Django Spire Logo"
                        class="flex-shrink-0"
                        style="width: 36px; height: 36px; object-fit: contain;"
                    >
                    <div class="d-flex flex-column overflow-hidden" x-show="!collapsed" x-transition>
                        <span class="fw-semibold text-truncate text-app-link-side-navigation ds-fs-9">
                            {% block side_navigation_title %}
                                Django Spire
                            {% endblock %}
                        </span>
                        <span class="text-truncate text-app-side-navigation fs-8">
                            {% block side_navigation_subtitle %}
                            {% endblock %}
                        </span>
                    </div>
                </a>
            {% endblock %}
        {% endblock %}
    </div>

    <div class="position-relative flex-grow-1 overflow-hidden">
        <div
            class="position-absolute top-0 start-0 w-100 z-1 side-navigation-fade-top"
            x-show="show_top_fade"
        >
        </div>

        <div
            class="navbar-nav-scroll scrollbar-hidden px-2 py-2 h-100"
            x-ref="scroll_container"
            @scroll="check_scroll()"
        >
            <nav class="d-flex flex-column gap-1 pt-1">
                {% block side_navigation_links %}
                    {% include 'django_spire/navigation/navigation_links.html' %}
                {% endblock %}
            </nav>
        </div>

        <div
            class="position-absolute bottom-0 start-0 w-100 z-1 side-navigation-fade-bottom"
            x-show="show_bottom_fade"
        >
        </div>
    </div>

    {% block side_navigation_bottom_content %}
        <div class="border-top px-2 py-2 mt-auto">
            <a
                role="button"
                class="d-flex align-items-center gap-2 rounded-3 px-3 py-2 fw-medium cursor-pointer text-app-link-side-navigation ds-fs-9"
                @click="toggle_collapse()"
            >
                <i
                    class="bi flex-shrink-0"
                    :class="collapsed ?
                        'bi-chevron-right' : 'bi-chevron-left'"
                >
                </i>
                <span x-show="!collapsed" x-transition>Collapse</span>
            </a>
        </div>
    {% endblock %}
</div>