<!DOCTYPE html>
<html data-theme="dark" lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>JADE</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
    <link href="https://fonts.googleapis.com/css?family=Russo+One" rel="stylesheet">

    <!--link rel="stylesheet" href="/animations.css"-->
    <link rel="stylesheet" href="/style.css">

    <script src="https://unpkg.com/htmx.org@2.0.0-beta4/dist/htmx.js"></script>
    <script src="https://unpkg.com/htmx-ext-sse@2.0.0/sse.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script>

    <script async src="https://js.stripe.com/v3/pricing-table.js"></script>
</head>

<body hx-ext="sse" sse-connect="/sse">

    {{embed}}

    <script>
        function copyToClipboardCode(button) {
            // Get the code element next to the button
            var codeElement = button.nextElementSibling;

            // Create a temporary textarea element
            var tempTextarea = document.createElement('textarea');
            tempTextarea.value = codeElement.textContent;

            // Append the temporary textarea to the document body
            document.body.appendChild(tempTextarea);

            // Select the text in the temporary textarea
            tempTextarea.select();

            // Copy the selected text to the clipboard
            document.execCommand('copy');

            // Remove the temporary textarea from the document body
            document.body.removeChild(tempTextarea);

            // Change the button text to indicate successful copy
            var originalText = button.innerHTML;
            button.innerHTML = '<i class="fa-solid fa-check"></i>';

            // Revert the button text after a short delay
            setTimeout(function () {
                button.innerHTML = originalText;
            }, 2000);
        }

        function copyToClipboard(button) {
            // Get the container element for all the message content
            var messageContentContainer = button.closest('.message-bot').querySelector('#content-column .content');

            // Get the text content of all the messages
            var messageContent = messageContentContainer.textContent.trim();

            // Create a temporary textarea element
            var tempTextarea = document.createElement('textarea');
            tempTextarea.value = messageContent;

            // Append the temporary textarea to the document body
            document.body.appendChild(tempTextarea);

            // Select the text in the temporary textarea
            tempTextarea.select();

            // Copy the selected text to the clipboard
            document.execCommand('copy');

            // Remove the temporary textarea from the document body
            document.body.removeChild(tempTextarea);

            // Change the button text to indicate successful copy
            var originalText = button.innerHTML;
            button.innerHTML = '<i class="fa-solid fa-check"></i>';

            // Revert the button text after a short delay
            setTimeout(function () {
                button.innerHTML = originalText;
            }, 2000);
        }

        let lastSelectedIndex = null;

        function toggleSelection(element) {
            const elements = Array.from(document.getElementsByClassName('icon-llm'));
            const index = elements.indexOf(element);

            if (document.body.classList.contains('shift-pressed') && lastSelectedIndex !== null) {
                const [start, end] = [lastSelectedIndex, index].sort((a, b) => a - b);
                let allSelected = true;
                for (let i = start; i <= end; i++) {
                    if (!elements[i].classList.contains('selected')) {
                        allSelected = false;
                        break;
                    }
                }
                for (let i = start; i <= end; i++) {
                    if (allSelected) {
                        elements[i].classList.remove('selected');
                        elements[i].classList.add('unselected');
                    } else {
                        elements[i].classList.add('selected');
                        elements[i].classList.remove('unselected');
                    }
                }
                lastSelectedIndex = null;

                const elements2 = Array.from(document.getElementsByClassName('icon-text'));
                for (let i = 0; i < elements2.length; i++) {
                    elements2[i].classList.remove('shiftselected');
                }
            } else if (document.body.classList.contains('shift-pressed') && lastSelectedIndex === null) {
                lastSelectedIndex = index;
                element.classList.toggle('shiftselected');
            } else {
                element.classList.toggle('selected');
                element.classList.toggle('unselected');
            }

            // If at least one model is selected, enable the delete button
            if (document.getElementsByClassName('selected icon-llm').length > 0) {
                document.getElementById('delete-model-button').disabled = false;
            } else {
                document.getElementById('delete-model-button').disabled = true;
            }

            toggleSendButton();
        }

        function getSelectedModelsIDs() {
            var selectedModelsIDs = [];
            var selectedModels = document.getElementsByClassName('selected icon-llm');
            for (var i = 0; i < selectedModels.length; i++) {
                selectedModelsIDs.push(selectedModels[i].getAttribute('data-id'));
            }
            return selectedModelsIDs.length > 0 ? JSON.stringify(selectedModelsIDs) : '[]';
        }
    </script>

</body>

</html>