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

{% block page_content %}
    <script>
        document.documentElement.style.setProperty(
            '--app-side-navigation-width',
            JSON.parse(localStorage.getItem('side_nav_collapsed') || 'false') ? '68px' : '240px'
        );
    </script>

    <div
        @mousemove.window="
            if (is_resizing_sub && !is_mobile) {
                let delta = $event.clientX - resize_start_x;
                sub_nav_width = resize_start_width + delta;

                if (sub_nav_width < sub_nav_min_width) sub_nav_width = sub_nav_min_width;
                if (sub_nav_width > sub_nav_max_width) sub_nav_width = sub_nav_max_width;
            }

            if (is_resizing_info && !is_mobile) {
                let delta = resize_start_x - $event.clientX;
                info_nav_width = resize_start_width + delta;

                if (info_nav_width < info_nav_min_width) info_nav_width = info_nav_min_width;
                if (info_nav_width > info_nav_max_width) info_nav_width = info_nav_max_width;
            }
        "
        @mouseup.window="is_resizing_sub = false; is_resizing_info = false"
        class="d-flex min-vh-100 w-100"
        x-data="{
            info_nav_max_width: 600,
            info_nav_min_width: 200,
            info_nav_width: 400,
            is_mobile: false,
            is_narrow_viewport: false,
            is_resizing_info: false,
            is_resizing_sub: false,
            resize_start_width: 0,
            resize_start_x: 0,
            show_info_nav: false,
            show_sub_nav: false,
            sub_nav_has_been_resized: false,
            sub_nav_max_width: 600,
            sub_nav_min_width: 300,
            sub_nav_width: 300,

            is_touch_device() {
                return window.matchMedia('(pointer: coarse)').matches || 'ontouchstart' in window;
            },

            update_command_bar_height() {
                let sticky_header = $refs.sticky_header
                let top_nav_height = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--app-top-navigation-height'))
                let command_bar_height = sticky_header.offsetHeight - top_nav_height

                document.documentElement.style.setProperty(
                    '--app-command-bar-height',
                    Math.max(0, command_bar_height) + 'px'
                )
            },

            update_viewport_state() {
                const was_narrow = this.is_narrow_viewport;
                const is_now_narrow = window.innerWidth < 992;
                this.is_narrow_viewport = is_now_narrow;
                this.is_mobile = this.is_touch_device();

                if (!was_narrow && is_now_narrow) {
                    this.show_sub_nav = false;
                    this.show_info_nav = false;
                }

                if (was_narrow && !is_now_narrow) {
                    this.$nextTick(() => {
                        this.show_sub_nav = false;
                        this.show_info_nav = false;
                    });
                }

                if (!this.is_narrow_viewport) {
                    this.show_info_nav = false;
                }
            },

            init() {
                this.is_mobile = this.is_touch_device();
                this.update_viewport_state();
                this.update_command_bar_height();

                const urlParams = new URLSearchParams(window.location.search);

                if (urlParams.has('show_sub_nav')) {
                    this.show_sub_nav = urlParams.get('show_sub_nav') === 'true'
                } else {
                    this.show_sub_nav = window.innerWidth >= 992
                }

                if (window.innerWidth < 992) {
                    this.show_info_nav = false;
                }

                window.addEventListener('resize', () => {
                    this.update_viewport_state();
                })
            },

            start_resize_info(event) {
                if (!this.is_mobile) {
                    this.is_resizing_info = true
                    this.resize_start_x = event.clientX
                    this.resize_start_width = this.info_nav_width
                }
            },

            start_resize_sub(event) {
                if (!this.is_mobile) {
                    let current_width = $refs.sub_nav_container.offsetWidth
                    this.sub_nav_width = current_width
                    this.sub_nav_has_been_resized = true
                    this.is_resizing_sub = true
                    this.resize_start_x = event.clientX
                    this.resize_start_width = current_width
                }
            },

            close_info() {
                this.show_info_nav = false
            },

            close_sub() {
                this.show_sub_nav = false
            },

            toggle_info() {
                this.show_info_nav = !this.show_info_nav

                if (this.is_narrow_viewport) {
                    this.show_sub_nav = false
                }
            },

            toggle_sub() {
                this.show_sub_nav = !this.show_sub_nav

                if (this.is_narrow_viewport) {
                    this.show_info_nav = false
                }
            }
        }"
    >
        <div
            class="d-none d-lg-block side-navigation hide-on-print sticky-top vh-100 align-self-start flex-shrink-0"
            style="width: var(--app-side-navigation-width, 240px);"
        >
            {% block full_page_side_navigation %}
                {% include 'django_spire/navigation/side_navigation.html' %}
            {% endblock %}
        </div>

        <div class="d-flex flex-column flex-grow-1" style="overflow-x: clip; min-width: 0;">
            <div class="sticky-top hide-on-print" style="z-index: 1020;" x-ref="sticky_header">
                {% block full_page_top_navigation %}
                    {% include 'django_spire/navigation/top_navigation.html' %}
                {% endblock %}

                {% block full_page_command_bar %}
                {% endblock %}
            </div>

            <div class="row flex-grow-1 g-0">
                <div
                    :class="is_narrow_viewport ? '' : 'position-relative col-auto border-end border-app-primary bg-app-layer-one'"
                    :style="is_narrow_viewport ? { position: 'fixed', width: '100vw', height: '100dvh', left: '0', top: '0', zIndex: 1050 } : (sub_nav_has_been_resized ? { width: sub_nav_width + 'px', minWidth: sub_nav_width + 'px', maxWidth: sub_nav_width + 'px' } : { minWidth: sub_nav_min_width + 'px' })"
                    x-cloak
                    x-ref="sub_nav_container"
                    x-show="has_content($refs.full_page_sub_navigation) && show_sub_nav"
                >
                    <div
                        :style="is_narrow_viewport ? { height: '100dvh' } : {}"
                        class="sticky-top side-panel overflow-y-auto d-flex flex-column"
                    >
                        <div class="d-flex align-items-center justify-content-between px-3 flex-shrink-0 border-bottom border-app-primary" style="height: 52px;">
                            <div class="d-flex align-items-center gap-2 overflow-hidden" style="min-width: 0;">
                                <span class="fw-semibold text-truncate ds-fs-9">
                                    {% block full_page_sub_navigation_title %}
                                    {% endblock %}
                                </span>
                            </div>
                            <div class="d-flex align-items-center gap-1 flex-shrink-0">
                                {% block full_page_sub_navigation_buttons %}
                                {% endblock %}
                                <a
                                    @click.prevent="close_sub()"
                                    @touchstart.prevent="close_sub()"
                                    class="d-flex align-items-center justify-content-center rounded text-muted cursor-pointer"
                                    role="button"
                                    style="width: 28px; height: 28px; transition: background-color 0.15s ease;"
                                >
                                    <i class="bi bi-x-lg ds-fs-11"></i>
                                </a>
                            </div>
                        </div>

                        <div class="flex-grow-1 overflow-y-auto overflow-x-hidden">
                            <div
                                @click.capture="if (is_narrow_viewport && $event.target.closest('[data-closes-nav]')) { $nextTick(() => { show_sub_nav = false }) }"
                                x-ref="full_page_sub_navigation"
                            >
                                {% block full_page_sub_navigation %}
                                {% endblock %}
                            </div>
                        </div>
                    </div>
                    <div
                        @mousedown="start_resize_sub($event)"
                        class="position-absolute top-0 d-flex align-items-center justify-content-center"
                        style="bottom: 0; cursor: ew-resize; right: -8px; user-select: none; width: 16px; z-index: 1000;"
                        x-show="!is_mobile"
                    >
                    </div>
                </div>

                <div
                    class="col {% block full_page_content_class %}pt-2 pb-2 ps-2 pe-2{% endblock %}"
                >
                    {% block full_page_content %}
                    {% endblock %}

                    {% block full_page_bottom_content %}
                    {% endblock %}
                </div>

                <div
                    :class="is_narrow_viewport ? '' : 'position-relative col-auto border-start border-app-primary bg-app-layer-one'"
                    :style="is_narrow_viewport ? { position: 'fixed', width: '100vw', height: '100dvh', right: '0', top: '0', zIndex: 1050 } : { width: info_nav_width + 'px', minWidth: info_nav_width + 'px', maxWidth: info_nav_width + 'px', marginLeft: '-' + info_nav_width + 'px' }"
                    x-cloak
                    x-show="has_content($refs.full_page_info_navigation) && show_info_nav"
                >
                    <div
                        :style="is_narrow_viewport ? { height: '100dvh' } : {}"
                        class="sticky-top side-panel overflow-y-auto bg-app-layer-one d-flex flex-column"
                    >
                        <div class="d-flex align-items-center justify-content-between px-3 flex-shrink-0 border-bottom border-app-primary" style="height: 52px;">
                            <span class="fw-semibold" style="font-size: 0.875rem;">
                                {% block full_page_info_navigation_title %}
                                {% endblock %}
                            </span>
                            <div class="d-flex align-items-center gap-1 flex-shrink-0">
                                {% block full_page_info_navigation_buttons %}
                                {% endblock %}
                                <a
                                    @click.prevent="close_info()"
                                    @touchstart.prevent="close_info()"
                                    class="d-flex align-items-center justify-content-center rounded text-muted cursor-pointer"
                                    role="button"
                                    style="width: 28px; height: 28px; transition: background-color 0.15s ease;"
                                >
                                    <i class="bi bi-x-lg ds-fs-11"></i>
                                </a>
                            </div>
                        </div>

                        <div class="flex-grow-1 overflow-y-auto overflow-x-hidden">
                            <div
                                x-on:click.capture="if (is_narrow_viewport) { $nextTick(() => { show_info_nav = false }) }"
                                x-ref="full_page_info_navigation"
                            >
                                {% block full_page_info_navigation %}
                                {% endblock %}
                            </div>
                        </div>

                        <div
                            @mousedown="start_resize_info($event)"
                            class="position-absolute top-0 d-flex align-items-center justify-content-center"
                            style="bottom: 0; cursor: ew-resize; left: -8px; user-select: none; width: 16px; z-index: 1000;"
                            x-show="!is_mobile"
                        >
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}