<!--
Snippet for a modal window that is used to create a query to an llm.

Variables:
    - id: The id of the modal window.
    - title: The title of the modal window.
    - query_type: The type of the query to be executed.
    - args : The arguments to be passed to the llm executor. (args have the form argName=argValue;argName=argValue;...)
-->
{% load static %}
{% load bloomerp %}

<div
    class="modal fade"
    id="modal_{{ id }}"
    tabindex="-1"
    data-bs-backdrop="static"
    data-bs-keyboard="false"
    role="dialog"
>
    <div
        class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-lg"
        role="document"
        id = "modal-dialog-{{ id }}"
    >
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title" id="magicModalTitle">
                    {{ title }}
                </h5>
                <button
                    type="button"
                    class="btn-close"
                    data-bs-dismiss="modal"
                    aria-label="Close"
                ></button>
            </div>
            
            <div class="modal-body container">
                <!--Controls-->
                <div class="d-flex gap-2 justify-content-start">
                    <button
                        class="btn btn-sm border"  
                        type="button"
                        onclick="toggleFullScreenModal('modal-dialog-{{ id }}')"
                        >
                        <span>Full screen</span>
                        <i class="bi bi-arrows-fullscreen pointer"></i>
                    </button>
                    <button
                        class="btn btn-sm border"
                        type="button"
                        data-bs-toggle="collapse"
                        data-bs-target="#conversation_history_{{ id }}"
                        hx-get="{% url 'components_ai_conversations' %}?conversation_type={{ query_type }}&target={{ id }}"
                        hx-target="#conversation_history_{{ id }}"
                        >
                        <span>Chat history</span>
                        <i class="bi bi-layout-sidebar-inset"></i>
                    </button>
                    <button
                        class="btn btn-sm border"
                        type="button"
                        hx-get="{% url 'components_ai_conversations' %}?conversation_type={{ query_type }}&target={{ id }}&new_conversation=true"
                        hx-target="#conversation_container_{{ id }}"
                        >
                        <span>New conversation</span>
                        <i class="bi bi-plus"></i>
                    </button>
                </div>
                <!--End Controls-->

                <div class="row mt-2 align items-center">

                    <div class="col-md-4 collapse collapse-horizontal" id="conversation_history_{{ id }}">
                        
                    </div>

                    <div class="col-md d-block mt-md-0 mt-2">
                         <!-- Conversation container -->
                        <div 
                            id="conversation_container_{{ id }}"
                            hx-get="{% url 'components_ai_conversations' %}?latest=true&conversation_type={{ query_type }}&args={{ args }}&target={{ id }}"
                            hx-target="#conversation_container_{{ id }}"
                            hx-trigger="load"

                            >

                        </div>
                        <!-- End conversation container -->
                    </div>
                </div>
            </div>
            <div class="modal-footer d-block">
                
                <div class="container">
                    <!-- Query -->
                    <div class="form-floating">
                        <textarea class="form-control" id="llm_query_{{ id }}"></textarea>
                        <label for="floatingTextarea">Query</label>  
                    </div>
                    <!-- End query -->


                    <div class="d-flex justify-content-center mt-2">                    
                        <button 
                            onclick="sendAiMessage('{{ id }}', '{% url "components_llm_executor" %}')"
                            class="btn btn-primary"
                            type="button"
                            id="generate_button_{{ id }}"
                        >
                            Send message
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="llm_output_{{ id }}" class="d-none"></div>

<script>
    document.getElementById('llm_query_{{ id }}').addEventListener('keypress', function(event) {
        if (event.key === 'Enter') {
            event.preventDefault();
            document.getElementById('generate_button_{{ id }}').click();
        }
    });
</script>



