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

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

{% block full_page_content_class %}{% endblock %}

{% block full_page_content %}
    <div
        class="d-flex flex-column overflow-hidden vh-minus-top-nav"
        x-data="{
            chat_load_ajax_view: Glue.view('{% url "django_spire:ai:chat:template:load" %}'),
            is_narrow_viewport: window.innerWidth < 768,
            show_history: false,

            init() {
                this.load_chat(0)
                this.show_history = !this.is_narrow_viewport

                window.addEventListener('resize', () => {
                    this.is_narrow_viewport = window.innerWidth < 768
                })
            },

            async load_chat(chat_id) {
                await this.chat_load_ajax_view.renderInnerHtml(this.$refs.chat_dialog, {
                        chat_id: chat_id
                    }
                )

                $dispatch('chat-loaded')
            }
        }"
        @deleted_chat.window="load_chat(0)"
        @load-chat.window="load_chat($event.detail.chat_id); if (is_narrow_viewport) show_history = false"
    >
        <div class="d-flex align-items-center px-4 border-bottom border-primary flex-shrink-0 bg-body" style="height: 52px;">
            <div class="d-flex align-items-center gap-2">
                <a
                    @click="show_history = !show_history"
                    class="user-select-none d-flex align-items-center gap-2 rounded px-2 py-1 cursor-pointer ds-fs-10"
                    role="button"
                    style="transition: background-color 0.15s ease;"
                    :class="show_history ? 'bg-primary-soft text-primary' : 'text-muted'"
                    x-cloak
                >
                    <i class="bi bi-clock-history ds-fs-7"></i>
                    <span class="fw-medium">Chat History</span>
                </a>
            </div>
        </div>

        <div class="d-flex flex-grow-1 overflow-hidden border-primary">
            <div
                class="flex-shrink-0 bg-body overflow-hidden"
                :class="show_history && is_narrow_viewport ? '' : 'border-end border-primary'"
                :style="show_history
                    ? (is_narrow_viewport
                        ? 'position: fixed; width: 100vw; height: 100vh; left: 0; top: 0; z-index: 1050;'
                        : 'width: 320px;')
                    : (is_narrow_viewport
                        ? 'display: none;'
                        : 'width: 0;')"
                style="transition: width 0.3s ease; width: 0;"
                x-cloak
            >
                <div :style="is_narrow_viewport ? 'width: 100%; height: 100%;' : 'width: 320px; height: 100%;'">
                    {% include 'django_spire/ai/chat/widget/selection_widget.html' %}
                </div>
            </div>

            <div class="flex-grow-1 overflow-hidden" style="min-width: 0;">
                <div class="h-100" x-ref="chat_dialog"></div>
            </div>
        </div>
    </div>
{% endblock %}