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

{% block page_content %}
    <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: true,
            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_viewport_state() {
                const was_narrow = this.is_narrow_viewport;
                const is_now_narrow = window.innerWidth < 992;
                this.is_narrow_viewport = is_now_narrow;

                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();

                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_mobile && this.is_narrow_viewport) {
                    this.show_sub_nav = false
                }
            },

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

                if (this.is_mobile && this.is_narrow_viewport) {
                    this.show_info_nav = false
                }
            }
        }"
    >
        <div class="d-none d-lg-block pe-1 side-navigation">
            {% block full_page_side_navigation %}
                {% include 'django_spire/navigation/side_navigation.html' %}
            {% endblock %}
        </div>

        <div class="container-fluid d-flex flex-column">
            <div class="row sticky-top">
                <div class="col-12">
                    {% block full_page_top_navigation %}
                        {% include 'django_spire/navigation/top_navigation.html' %}
                    {% endblock %}
                </div>
            </div>

            <div class="row">
                <div
                    :class="(is_mobile && is_narrow_viewport) ? '' : 'position-relative col-auto'"
                    :style="(is_mobile && is_narrow_viewport) ? 'position: fixed; width: 100vw; height: 100vh; left: 0; top: 0; z-index: 1040;' : (sub_nav_has_been_resized ? `width: ${sub_nav_width}px; min-width: ${sub_nav_width}px; max-width: ${sub_nav_width}px;` : `min-width: ${sub_nav_min_width}px;`)"
                    x-ref="sub_nav_container"
                    x-show="has_content($refs.full_page_sub_navigation) && show_sub_nav"
                    x-transition
                >
                    <div
                        :style="(is_mobile && is_narrow_viewport) ? 'height: 100vh;' : ''"
                        class="row sticky-top border-end border-app-primary side-panel overflow-y-auto"
                    >
                        <div class="col">
                            <div class="row pb-2 align-items-center">
                                <div class="col-auto px-1" style="visibility: hidden;">
                                    {% include 'django_spire/button/primary_button.html' with button_icon='bi bi-x-lg' %}
                                </div>
                                <div class="col h5 text-app-primary text-center text-nowrap overflow-hidden text-truncate mb-0" style="min-width: 0;">
                                    {% block full_page_sub_navigation_title %}
                                    {% endblock %}
                                </div>
                                <div class="col-auto px-1">
                                    {% block full_page_sub_navigation_buttons %}
                                    {% endblock %}
                                </div>
                                <div class="col-auto px-1">
                                    {% include 'django_spire/button/primary_button.html' with button_icon='bi bi-x-lg' x_button_click='close_sub()' %}
                                </div>
                            </div>

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

                <div
                    class="panel-toggle-container panel-toggle-container-left"
                    x-show="has_content($refs.full_page_sub_navigation) && !show_sub_nav && !((is_mobile && is_narrow_viewport) && show_info_nav)"
                >
                    {% include 'django_spire/button/primary_button.html' with button_icon='bi bi-chevron-right' x_button_click='toggle_sub()' %}
                </div>

                <div class="col">
                    {% block full_page_content %}
                    {% endblock %}

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

                <div
                    class="col-auto panel-toggle-container panel-toggle-container-right"
                    x-show="has_content($refs.full_page_info_navigation) && !show_info_nav && !((is_mobile && is_narrow_viewport) && show_sub_nav)"
                >
                    {% include 'django_spire/button/primary_button.html' with button_icon='bi bi-chevron-left' x_button_click='toggle_info()' %}
                </div>

                <div
                    :class="(is_mobile && is_narrow_viewport) ? '' : 'position-relative col-auto'"
                    :style="(is_mobile && is_narrow_viewport) ? 'position: fixed; width: 100vw; height: 100vh; right: 0; top: 0; z-index: 1040;' : (show_info_nav ? `width: ${info_nav_width}px; min-width: ${info_nav_width}px; max-width: ${info_nav_width}px; margin-left: -${info_nav_width}px; z-index: 1040;` : 'margin-left: 0px; z-index: 1040;')"
                    x-show="has_content($refs.full_page_info_navigation) && show_info_nav"
                    x-transition
                >
                    <div
                        :style="(is_mobile && is_narrow_viewport) ? 'height: 100vh;' : ''"
                        class="row sticky-top border-start border-app-primary side-panel overflow-y-auto bg-app-layer-one"
                    >
                        <div class="col">
                            <div class="row pb-2">
                                <div class="col text-center pt-1 h5 text-app-primary">
                                    {% block full_page_info_navigation_title %}
                                    {% endblock %}
                                </div>

                                <div class="col-auto px-1">
                                    {% block full_page_info_navigation_buttons %}
                                    {% endblock %}
                                </div>

                                <div class="col-auto px-1">
                                    {% include 'django_spire/button/primary_button.html' with button_icon='bi bi-x-lg' x_button_click="close_info()" %}
                                </div>
                            </div>

                            <div class="row">
                                <div
                                    x-on:click.capture="if (is_narrow_viewport) { $nextTick(() => { show_info_nav = false }) }"
                                    class="col"
                                    x-ref="full_page_info_navigation"
                                >
                                    {% block full_page_info_navigation %}
                                    {% endblock %}
                                </div>
                            </div>
                        </div>
                    </div>

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