<div class="chat-container mt-5">
    <hx hx-get="/loadChat" hx-trigger="load once" hx-swap="outerHTML"></hx>

    <div class="chat-input-container mb-5">
        <div class="textarea-wrapper">
            <textarea {% if not IsLogin or not HaveKey %}disabled{% endif %} class="textarea"
                placeholder="Type your message here..." name="message" oninput="toggleSendButton()"
                id="chat-input-textarea"></textarea>
            <div class="button-group">
                <hx hx-get="/loadSettings" hx-trigger="load" hx-swap="outerHTML" hx-target="this"></hx>
                <hx hx-get="/loadKeys" 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="/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"
                    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-get="/generatePlaceholder" hx-swap="beforeend settle:200ms" 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>
</div>

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

    function toggleSendButton() {
        const sendButton = document.getElementById('chat-input-send-btn');
        const selectedLLMIds = JSON.parse(getSelectedModelsIDs());
        sendButton.disabled = textarea.value.trim() === '' || selectedLLMIds.length === 0;
    }

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

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