{% extends 'django_spire/page/full_page.html' %}

{% load static %}

{% block base_head_additional_css %}
    <link rel="stylesheet" href="{% static 'django_spire/knowledge/css/navigation_items.css' %}?v={{ DJANGO_SPIRE_VERSION }}">
{% endblock %}

{% block base_body_top_js %}
    <script type="application/javascript" src="{% static 'django_spire/knowledge/collection/js/managers.js' %}?v={{ DJANGO_SPIRE_VERSION }}"></script>
{% endblock %}

{% block full_page_content %}
    <div
        class="row h-100 position-relative"
        x-data="{
            nav_toggle_type: null,
            show_side_nav: false,
            handle_resize() {
            console.log('handle_resize')
                this.nav_toggle_type = window.innerWidth > 768 ? 'collapse' : 'offcanvas'
                if (this.nav_toggle_type === 'offcanvas') {
                    document.getElementById('side-nav').classList.remove('show')
                    this.show_side_nav = false
                }
                if (this.nav_toggle_type === 'collapse') {
                    document.getElementById('side-nav').classList.add('show')
                    this.show_side_nav = true
                }
            },
        }"
        x-init="handle_resize()"
        @resize.window="handle_resize()"
    >
        <div class="col">
            {% block knowledge_full_page_content %}
            {% endblock %}
        </div>
        <div class="col-auto position-relative border-start">
            <div
                @click="show_side_nav = !show_side_nav"
                class="position-absolute"
                style="top: 10vh; left: -10px;"
            >

                <i
                    :class="show_side_nav && nav_toggle_type === 'collapse' ? 'bi-arrow-right-circle-fill' : 'bi-arrow-left-circle-fill'"
                    type="button"
                    class="bi fs-4 text-app-default-text-color"
                    :data-bs-toggle="nav_toggle_type"
                    data-bs-target="#side-nav"
                    aria-expanded="false"
                    aria-controls="side-nav"
                ></i>
            </div>
        </div>
        <div
            class="col-auto bg-app-layer-one ps-0"
            :class="nav_toggle_type === 'collapse' ? 'collapse collapse-horizontal' : 'offcanvas offcanvas-end'"
            data-bs-backdrop="false"
            id="side-nav">
            <div
                class="position-relative h-100"
                :style="nav_toggle_type === 'collapse' && 'width: 35vw'"
            >
                <template x-if="nav_toggle_type === 'offcanvas'"> {# Needs to be template, x-show doesn't work here #}
                    <div class="w-100 d-flex justify-content-end pb-2">
                        <i
                            class="bi bi-x-lg cursor-pointer fs-5"
                            style="padding-top: 10px; padding-right: calc(var(--bs-gutter-x) * .5);"
                            data-bs-toggle="offcanvas"
                        >
                        </i>
                    </div>
                </template>
                {% include 'django_spire/knowledge/navigation/content/navigation_content.html' %}
            </div>
        </div>
    </div>

{% endblock %}

{% block base_body_additional_bottom_js %}
    <script type="application/javascript" src="{% static 'django_spire/knowledge/collection/js/x_component.js' %}?v={{ DJANGO_SPIRE_VERSION }}"></script>
{% endblock %}