{% load static %}

<div
    class="navbar sticky-top bg-app-side-navigation d-block"
    style="width: 100%; height: 100vh"
>
    <div class="text-center pt-2">
        {% block side_navigation_top_content %}
            <div class="text-center d-flex justify-content-center mb-4">
                {% block side_navigation_img %}
                    <a href="/" class="p-0 m-0">
                        <img
                            src="{% static 'img/django_spire.svg' %}"
                            class="w-side-navigation-img"
                            alt="Django Spire Logo"
                        >
                    </a>
                {% endblock %}
            </div>
        {% endblock %}
    </div>

    <div
        class="position-relative"
        style="height: calc(100vh - var(--app-side-navigation-top-content-height));"
        x-data="{
            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;
            }
        }"
        x-init="$nextTick(() => { check_scroll(); window.addEventListener('resize', () => check_scroll()); })"
    >
        <div
            class="position-absolute top-0 start-0 w-100 side-navigation-fade-top"
            style="z-index: 10;"
            x-show="show_top_fade"
        >
        </div>

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

        <div
            class="position-absolute bottom-0 start-0 w-100 side-navigation-fade-bottom"
            style="z-index: 10;"
            x-show="show_bottom_fade"
        >
        </div>
    </div>
</div>
