{% if IsSubscribed or not IsLimiteReached or not IsLogin %}
<div class="chat-input-container mb-5">
    <div class="textarea-wrapper">
        <div class="control" id="textarea-control">
            <textarea {% if not IsLogin or not HaveKey %}disabled{% endif %} class="textarea has-fixed-size"
                placeholder="Type your message here..." name="message" oninput="toggleSendButton()"
                id="chat-input-textarea"></textarea>
        </div>
        <div class="button-group">
            <hx hx-get="/loadSettings" hx-trigger="load" hx-swap="outerHTML" hx-target="this"></hx>
            <hx hx-get="/loadUsageKPI" hx-trigger="load" hx-swap="outerHTML" hx-target="this"></hx>
            <hx hx-get="/loadConversationSelection" hx-trigger="load" hx-swap="outerHTML" hx-target="this"></hx>
            <hx hx-get="/loadModelSelection" hx-trigger="load" hx-swap="outerHTML" hx-target="this"></hx>
            <!--button {% if not IsLogin or not HaveKey %}style="display: none;" {%endif%}
                    class="button is-small to-reduce-opacity" onclick="clearTextArea()" id="clear-button"
                    hx-post="/clearChat" hx-swap="outerHTML" hx-target="#chat-container" title="Clear chat">
                    <span class="icon">
                        <i class="fa-solid fa-broom"></i>
                    </span>
                </button-->
            <!--button type="submit" class="button is-small" hx-get="/test" hx-swap="beforeend">
                    <span class="icon">
                        <i class="fa-solid fa-vials"></i>
                    </span>
                </button-->
            <button disabled type="submit" class="send-button button is-primary is-small" hx-post="/generatePlaceholder"
                hx-swap="beforeend" hx-target="#chat-messages" id="chat-input-send-btn" class="chat-input"
                hx-include="[name='message']" hx-vals="js:{selectedLLMIds: getSelectedModelsIDs()}"
                onclick="clearTextArea()">
                <span class="icon">
                    <i class="fa-solid fa-chevron-right"></i>
                </span>
            </button>
        </div>
    </div>
</div>
{% endif %}

<script>
    var textareaControl = document.getElementById('textarea-control');

    // Every 0.01s check if the text area have htmx-request class, if yes, add the class is-loading
    setInterval(function () {
        if (textareaControl.classList.contains('htmx-request')) {
            textareaControl.classList.add('is-loading');
        } else {
            textareaControl.classList.remove('is-loading');
        }
    }, 10);

    setInterval(function () {
        if (window.innerWidth < 450) {
            var elements = document.getElementsByClassName('message-icon');
            for (var i = 0; i < elements.length; i++) {
                elements[i].classList.remove('is-48x48');
                elements[i].classList.add('is-32x32');
                elements[i].parentElement.style = "padding-right: 0;"
            }
        } else {
            var elements = document.getElementsByClassName('message-icon');
            for (var i = 0; i < elements.length; i++) {
                elements[i].classList.remove('is-32x32');
                elements[i].classList.add('is-48x48');
                elements[i].parentElement.style = ""
            }
        }
    }, 300);

    document.getElementById('chat-input-textarea').addEventListener('focus', function () {
        var buttons = document.getElementsByClassName('to-reduce-opacity');
        for (var i = 0; i < buttons.length; i++) {
            buttons[i].style.opacity = 0.2;
        }
    });

    document.getElementById('chat-input-textarea').addEventListener('blur', function () {
        var buttons = document.getElementsByClassName('to-reduce-opacity');
        for (var i = 0; i < buttons.length; i++) {
            buttons[i].style.opacity = 1;
        }
    });

    const textarea = document.querySelector('#chat-input-textarea');
    textarea.addEventListener('keydown', handleTextareaKeydown);

    function toggleSendButton() {
        document.getElementById('chat-input-send-btn').disabled = textarea.value.trim().length === 0 || document.getElementsByClassName('selected icon-llm').length === 0;
    }

    function clearTextArea() {
        setTimeout(function () {
            textarea.value = '';
            toggleSendButton();
        }, 200);
    }

    function updateIcon(icon, ConversationAreaId) {
        var selectedIcon = document.getElementById('selectedIcon-' + ConversationAreaId);
        selectedIcon.src = icon;
    }

    function handleTextareaKeydown(event) {
        if (event.metaKey && event.key === 'Enter' && event.target === textarea && textarea.value.trim() !== '' && document.getElementsByClassName('selected icon-llm').length !== 0) {
            // Check if the cursor is in the textarea
            // Trigger the same action as the send button
            document.getElementById('chat-input-send-btn').click();
        }
    }
</script>