<!DOCTYPE html>
<html lang="en" class="bg-gray-100 dark:bg-gray-800">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ title }}</title>
    <meta name="description" content="{{ short_description }}" />
    <link rel="icon" href="{{ favicon }}">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <!-- <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"> -->
    <!-- <link href="https://unpkg.com/tailwindcss@^3.0/dist/tailwind.min.css" rel="stylesheet"> -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.tailwindcss.com?plugins=typography"></script>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/dompurify/dist/purify.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/default.min.css">
    <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js"></script>
    <script src="static/turtle.js"></script>
    <script src="static/sparql.js"></script>
</head>

<body class="bg-gray-100 dark:bg-gray-800 text-black dark:text-white">
    <div class="flex flex-col h-screen">

        <!-- Main chat container -->
        <div id="chat-container" class="flex-grow overflow-y-auto">

            <!-- Title, top nav, and description -->
            <div class="container mx-auto px-2 max-w-5xl">
                <div class="container mx-auto max-w-5xl p-4 border-b border-slate-300 dark:border-slate-600 flex justify-center items-center">
                    <h2 class="text-xl font-semibold flex">
                        <img class="h-8 mr-3" src="{{ favicon }}">
                        {{ title }}
                        <div class="inline-block ml-3 px-3 py-1 bg-red-600 text-white text-sm font-semibold rounded-full justify-center items-center">
                            Beta
                        </div>
                    </h2>
                    <!-- Top nav buttons -->
                    <div class="nav-btns-desktop flex space-x-1 absolute top-2 right-8">
                        <button data-tooltip="Switch theme" id="theme-switch-btn" class="px-4 py-2 rounded-lg hover:bg-gray-300 dark:hover:bg-slate-500">
                            <i id="sun-icon" class="fas fa-sun"></i>
                            <i id="moon-icon" class="fas fa-moon hidden"></i>
                        </button>
                        <a href="{{ repository_url }}" target="_blank" rel="noopener noreferrer"
                            class="text-black hover:text-black dark:text-white">
                            <button data-tooltip="Source code" class="px-4 py-2 rounded-lg hover:bg-gray-300 dark:hover:bg-slate-500">
                                <i class="fab fa-github text-xl"></i>
                            </button>
                        </a>
                    </div>
                    <!-- Nav on mobile -->
                    <div class="nav-btns-mobile flex gap-1 absolute top-2 right-3">
                        <button data-tooltip="Menu" id="mobile-nav-btn" class="px-4 py-2 rounded-lg hover:bg-gray-300 dark:hover:bg-slate-500">
                            <i class="fas fa-bars"></i>
                        </button>
                        <div id="nav-btns-mobile" class="hidden">
                            <!-- <button data-tooltip="Switch theme" id="theme-switch-btn" class="px-4 py-2 rounded-lg hover:bg-gray-300 dark:hover:bg-slate-500">
                                <i id="sun-icon" class="fas fa-sun"></i>
                                <i id="moon-icon" class="fas fa-moon hidden"></i>
                            </button> -->
                            <a href="/docs" target="_blank" rel="noopener noreferrer" class="text-black hover:text-black dark:text-white">
                                <button data-tooltip-target="tooltip-api" class="px-4 py-3 rounded-lg hover:bg-gray-300 dark:hover:bg-slate-500">
                                    <img class="h-5" src="https://raw.github.com/vemonet/libre-chat/main/docs/docs/assets/openapi_logo.svg">
                                </button>
                            </a>
                            <a href="{{ repository_url }}" target="_blank" rel="noopener noreferrer" class="text-black hover:text-black dark:text-white">
                                <button data-tooltip="Source code" class="px-4 py-2 rounded-lg hover:bg-gray-300 dark:hover:bg-slate-500">
                                    <i class="fab fa-github text-xl"></i>
                                </button>
                            </a>
                        </div>
                    </div>
                </div>
                <div id="description" class="py-4 text-center">
                    {{ description }}
                </div>
            </div>

            <div id="chat-thread" class="w-full border-t border-slate-400">
                <!-- Chat messages will be appended here -->
            </div>
        </div>

        <!-- Warning message -->
        <div class="text-center">
            <div id="warning-card" class="bg-orange-300 p-2 text-orange-900 text-sm rounded-lg font-semibold mb-2 hidden inline-block"></div>
        </div>

        <!-- List of examples -->
        <div class="py-2 px-4 justify-center items-center text-xs flex flex-col flex-row space-y-2" id="example-buttons"></div>

        <!-- User input border-t border-slate-400 dark:border-slate-500 -->
        <form class="p-2 flex" id="chat-form">
            <div class="container flex mx-auto max-w-5xl">
                <textarea id="user-input" style="height: max-content;"
                    class="flex-grow px-4 py-2 border border-slate-400 bg-slate-200 dark:bg-slate-700 dark:border-slate-500 rounded-lg focus:outline-none focus:ring focus:ring-blue-200 dark:focus:ring-blue-400 overflow-y-hidden resize-none"
                    placeholder="Ask Expasy..." rows="1"
                ></textarea>
                <button type="submit" id="submit-btn" class="ml-2 px-4 py-2 rounded-lg text-slate-500 bg-slate-200 hover:bg-slate-300 dark:text-slate-400 dark:bg-slate-700 dark:hover:bg-slate-600">
                    <i id="send-icon" class="fas fa-paper-plane"></i>
                    <i id="loading-spinner" class="hidden fas fa-spinner fa-spin"></i>
                </button>
                <button id="new-conversation-btn" data-tooltip="Start a new conversation" class="tooltip-top ml-2 px-4 py-2 rounded-lg text-slate-500 bg-slate-200 hover:bg-slate-300 dark:text-slate-400 dark:bg-slate-700 dark:hover:bg-slate-600">
                    <i id="clean-icon" class="fas fa-trash"></i>
                </button>
                <div class="ml-4 tooltip-top" data-tooltip="⚠️ Will check if the queries sent are valid SPARQL, no streaming response, slower">
                    <input type="checkbox" id="checks-checkbox" class="mr-2">
                    <label for="checks-checkbox">Run additional checks</label>
                </div>
            </div>
        </form>
    </div>

    <script type="module">
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    // Remove backticks from inline code
                    typography: {
                        DEFAULT: {
                            css: {
                                // Fix <code> rendering
                                'code::before': {
                                    content: '""'
                                },
                                'code::after': {
                                    content: '""'
                                },
                                'code': {
                                    "border-radius": "0.375rem",
                                    "padding": "0.35em",
                                    "color": "var(--tw-prose-pre-code)",
                                    "background-color": "var(--tw-prose-pre-bg)",
                                    "font-weight": "normal"
                                },
                            }
                        }
                    },
                },
            },
        }

        hljs.registerLanguage('ttl', window.hljsDefineTurtle);
        hljs.registerLanguage('sparql', window.hljsDefineSparql);
        // TODO: those highlights are not great, move to use YASGUI?

        document.addEventListener("DOMContentLoaded", function() {
            // https://api.openai.com/v1/chat/completions
            // const url = 'https://api.openai.com/v1/chat/completions';
            const apiUrl = window.location;

            const description = document.getElementById("description");
            const userInput = document.getElementById("user-input");
            const submitBtn = document.getElementById("submit-btn");
            const sendIcon = document.getElementById("send-icon");
            const loadingSpinner = document.getElementById("loading-spinner");
            const addChecks = document.getElementById("checks-checkbox");
            description.innerHTML = marked.parse(description.innerHTML.trim());

            let messages = []

            // Warning card to send users messages
            const warningCard = document.getElementById("warning-card");
            function showWarning(message) {
                warningCard.textContent = message;
                warningCard.style.display = "inline-block";
            }
            function hideWarning() {
                warningCard.style.display = "none";
            }

            // Generate example buttons dynamically
            const exampleButtons = document.getElementById("example-buttons");
            const exampleStrings = [
                {% for example in examples %}
                    "{{ example }}",
                {% endfor %}
            ];
            exampleStrings.forEach(example => {
                const button = document.createElement("button");
                button.textContent = example;
                button.className = "px-4 py-1 bg-slate-300 text-slate-600 rounded-lg hover:bg-gray-400";
                button.dataset.example = example;
                button.addEventListener("click", function() {
                    userInput.value = example;
                    submitInput(userInput);
                });
                exampleButtons.appendChild(button);
            });

            // Append a message to the chat
            const chatContainer = document.getElementById("chat-container");
            const chatThread = document.getElementById("chat-thread");
            const chatForm = document.getElementById("chat-form");
            let msgCount = 0;
            function appendMessage(message, sender) {
                msgCount += 1
                const messageElement = document.createElement("div");
                messageElement.className = `border-b border-slate-400 ${sender === "user" ? "bg-gray-100 dark:bg-gray-700" : "bg-gray-200 dark:bg-gray-600"}`;
                // messageElement.className = `border-b border-slate-400 ${sender === "user" ? "bg-gray-100 dark:bg-gray-700" : "bg-gray-200 dark:bg-gray-600 hidden"}`;
                messageElement.innerHTML = `<div class="px-2 py-8 mx-auto max-w-5xl">
                    <div class="container flex items-center">
                        <article class="prose dark:prose-invert max-w-full">
                            ${marked.parse(message)}
                        </article>
                    </div>
                </div>`;
                chatThread.appendChild(messageElement);
                return messageElement
            }

            // Append buttons for relevant sources documents and running query
            function appendSources(source_documents, msgs) {
                const mdResp = msgs[msgs.length-1]["content"]
                const messageElement = chatThread.lastElementChild;
                const {endpointUrl, lastQuery} = extractSparqlInfo(mdResp);
                let queryBtn = "";
                if (endpointUrl && lastQuery) {
                    queryBtn = `<a class="my-3 px-3 py-1 text-sm text-black dark:text-white bg-gray-300 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-800 rounded-lg" href="https://yasgui.triply.cc/?endpoint=${endpointUrl}&query=${encodeURIComponent(lastQuery)}" target="_blank">Run and edit the query</a>&nbsp;&nbsp;`
                }
                let sourcesBtnHtml = ""
                let sourcesMd = ""
                let sourcesHtml = ""
                if (source_documents && source_documents.length > 0) {
                    for (const [i, doc] of source_documents.entries()) {
                        if (doc.payload.doc_type === "ontology") {
                            sourcesMd += `\`${i + 1} - ${Math.round(doc.score*1000)/1000}\` Ontology for ${doc.payload.endpoint_url}\n\n\`\`\`turtle\n${doc.payload.question.trim()}\n\`\`\`\n\n`;
                        } else if (doc.payload.doc_type === "sparql_query") {
                            sourcesMd += `\`${i + 1} - ${Math.round(doc.score*1000)/1000}\` ${doc.payload.question} (${doc.payload.endpoint_url})\n\n\`\`\`sparql\n${doc.payload.answer}\n\`\`\`\n\n`;
                        } else if (doc.payload.doc_type === "schemaorg_jsonld") {
                            sourcesMd += `\`${i + 1} - ${Math.round(doc.score*1000)/1000}\` ${doc.payload.question} (${doc.payload.endpoint_url})\n\n\`\`\`json\n${doc.payload.answer}\n\`\`\`\n\n`;
                        } else if (doc.payload.doc_type === "shex") {
                            sourcesMd += `\`${i + 1} - ${Math.round(doc.score*1000)/1000}\` ${doc.payload.question} (${doc.payload.endpoint_url})\n\n\`\`\`ttl\n${doc.payload.answer}\n\`\`\`\n\n`;
                        } else {
                            sourcesMd += `\`${i + 1} - ${Math.round(doc.score*1000)/1000}\` ${doc.payload.question} (${doc.payload.endpoint_url})\n\n${doc.payload.answer}\n\n`;
                        }
                    }
                    // <pre><code>${doc.payload.example.replace(/<&lt;/g, '<').replace(/&gt;/g, '>')}</code></pre>`;
                    sourcesBtnHtml += `
                        <button id="source-btn-${msgCount}" class="my-3 px-3 py-1 text-sm bg-gray-300 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-800 rounded-lg">See relevant references</button>&nbsp;&nbsp;
                        ${queryBtn}
                        <button id="like-btn-${msgCount}" class="feedback-btn my-3 px-3 py-1 text-sm bg-gray-300 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-800 rounded-lg"><i class="fas fa-thumbs-up"></i></button>&nbsp;&nbsp;
                        <button id="dislike-btn-${msgCount}" class="feedback-btn my-3 px-3 py-1 text-sm bg-gray-300 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-800 rounded-lg"><i class="fas fa-thumbs-down"></i></button>&nbsp;&nbsp;
                    `
                    sourcesHtml += `<dialog id="source-dialog-${msgCount}" class="bg-white dark:bg-gray-800 m-3 rounded-lg shadow-md w-full">
                        <button id="close-dialog-${msgCount}" class="fixed top-2 right-8 m-3 px-2 text-xl bg-gray-200 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-800 rounded-full"><i class="fas fa-times"></i></button>
                        <article class="prose dark:prose-invert p-3 w-full max-w-full">
                            ${DOMPurify.sanitize(marked.parse(sourcesMd))}
                        </article>
                    </dialog>`
                }
                // Hide all previous feedback buttons before adding the new ones
                const feedbackButtons = document.getElementsByClassName('feedback-btn');
                for (var i = 0; i < feedbackButtons.length; i++) {
                    feedbackButtons[i].style.display = 'none';
                }

                messageElement.lastElementChild.innerHTML += sourcesBtnHtml;
                messageElement.lastElementChild.innerHTML += sourcesHtml;
                // Add click event
                if (source_documents && source_documents.length > 0) {
                    // const card = document.getElementById(`source-card-${msgCount}`);
                    const dialog = document.getElementById(`source-dialog-${msgCount}`);
                    const sourceButton = document.getElementById(`source-btn-${msgCount}`);
                    const closeButton = document.getElementById(`close-dialog-${msgCount}`);

                    sourceButton.addEventListener("click", function() {
                        dialog.showModal();
                        dialog.scrollTop = 0;
                    });
                    closeButton.addEventListener("click", function() {
                        dialog.close();
                    });
                }
                // Add thumbs up/down click event
                const likeBtn = document.getElementById(`like-btn-${msgCount}`);
                const dislikeBtn = document.getElementById(`dislike-btn-${msgCount}`);
                likeBtn.addEventListener("click", function() {
                    fetch(`${apiUrl}feedback`, {
                        method: "POST",
                        headers: { "Content-Type": "application/json" },
                        body: JSON.stringify({
                            "like": true,
                            "messages": msgs,
                        }),
                    });
                    likeBtn.disabled = true;
                    dislikeBtn.disabled = true;
                    likeBtn.style.display = "none";
                    dislikeBtn.style.display = "none";
                });
                dislikeBtn.addEventListener("click", function() {
                    fetch(`${apiUrl}feedback`, {
                        method: "POST",
                        headers: { "Content-Type": "application/json" },
                        body: JSON.stringify({
                            "like": false,
                            "messages": msgs,
                        }),
                    });
                    likeBtn.disabled = true;
                    dislikeBtn.disabled = true;
                    likeBtn.style.display = "none";
                    dislikeBtn.style.display = "none";
                });
            }

            // Function to show the tooltip content on click
            function showTooltipContent(event) {
                const tooltip = event.target.getAttribute("data-tooltip");
                if (tooltip) {
                    window.alert(tooltip);
                }
            }
            // Attach click event to all <code> elements
            const codeElements = document.getElementsByTagName("code");
            for (const codeElement of codeElements) {
                codeElement.addEventListener("click", showTooltipContent);
            }

            function enableLoading() {
                loadingSpinner.classList.remove("hidden");
                sendIcon.classList.add("hidden");
                submitBtn.disabled = true;
            }
            function disableLoading() {
                chatContainer.scrollTop = chatContainer.scrollHeight
                loadingSpinner.classList.add("hidden");
                sendIcon.classList.remove("hidden");
                submitBtn.disabled = false;
                // hideWarning();
            }

            // Send the user input to the chat API
            async function submitInput(inputElem) {
                if (!loadingSpinner.classList.contains("hidden")) {
                    showWarning("⏳ Thinking...");
                    return
                }
                const userMsg = inputElem.value.trim();
                if (userMsg === "") {
                    showWarning("Please enter a question.");
                    return;
                }
                exampleButtons.style.display = "none";
                messages.push({role: "user", content: userMsg})
                appendMessage(userMsg, "user");
                inputElem.value = "";
                fixInputHeight();
                enableLoading();
                const headers = {
                    'Content-Type': 'application/json',
                    // 'Authorization': `Bearer ${apiKey}`,
                };
                const body = JSON.stringify({
                    messages: messages,
                    model: "{{ llm_model }}",
                    max_tokens: 50,
                    stream: !addChecks.checked,
                    api_key: "{{ expasy_key }}",
                });

                const response = await fetch(`${apiUrl}chat`, {
                    method: 'POST',
                    headers: headers,
                    body: body,
                });
                let docs = null;
                if (!addChecks.checked) {
                    appendMessage("", "assistant");
                    // const lastMsg = chatThread.lastElementChild
                    // if (lastMsg.classList.contains("hidden")) chatThread.lastElementChild.classList.remove("hidden")
                    const responseContainer = chatThread.lastElementChild.lastElementChild.lastElementChild.lastElementChild;

                    const reader = response.body.getReader();
                    const decoder = new TextDecoder('utf-8');
                    let buffer = '';
                    // Iterate stream response
                    while (true) {
                        const { value, done } = await reader.read();
                        if (done) break;
                        buffer += decoder.decode(value, { stream: true });
                        let boundary = buffer.lastIndexOf('\n');
                        if (boundary !== -1) {
                            const chunk = buffer.slice(0, boundary);
                            buffer = buffer.slice(boundary + 1);

                            const lines = chunk.split('\n').filter(line => line.trim() !== '');
                            for (const line of lines) {
                                if (line === 'data: [DONE]') {
                                    return;
                                }
                                if (line.startsWith('data: ')) {
                                    try {
                                        const json = JSON.parse(line.substring(6));
                                        if (json.docs) {
                                            // appendSources(json.docs)
                                            docs = json.docs;
                                            // console.log(json.full_prompt)
                                        } else {
                                            const content = json.choices[0].delta?.content;
                                            if (content) {
                                                responseContainer.innerHTML += content;
                                            }
                                        }
                                    } catch (error) {
                                        console.warn('Failed to parse JSON', error);
                                    }
                                }
                            }
                        }
                    }
                    // Process any remaining data in the buffer
                    if (buffer.length > 0) {
                        try {
                            const json = JSON.parse(buffer.substring(6));
                            const content = json.choices[0].delta?.content;
                            if (content) {
                                responseContainer.innerHTML += content;
                            }
                        } catch (error) {
                            console.warn('Failed to parse remaining JSON', error);
                        }
                    }
                    messages.push({role: "assistant", content: responseContainer.innerHTML.trim().replace(/&lt;/g, '<').replace(/&gt;/g, '>')})
                    responseContainer.innerHTML = DOMPurify.sanitize(marked.parse(responseContainer.innerHTML.trim().replace(/&lt;/g, '<').replace(/&gt;/g, '>')));
                    hideWarning();
                } else {
                    // Don't stream, await full response with additional checks done on the server
                    try {
                        const data = await response.json();
                        console.log("Complete response", data);
                        // console.log(data.full_prompt)
                        const respMsg = data.choices[0].message.content;
                        messages.push({role: "assistant", content: respMsg})
                        appendMessage(respMsg, "assistant");
                        docs = data.docs;
                        hideWarning();
                    } catch (error) {
                        console.error('Error:', error);
                        console.error('Response:', response);
                        showWarning("An error occurred. Please try again.");
                    }
                }
                appendSources(docs, messages)
                hljs.highlightAll();
                disableLoading();
            }


            // Submit form when hit enter, or click submit button
            userInput.addEventListener("keydown", function(event) {
                chatContainer.scrollTop = chatContainer.scrollHeight;
                if (event.key === "Enter" && !event.shiftKey) {
                    event.preventDefault();
                    submitInput(userInput);
                }
            });
            chatForm.addEventListener("submit", function(event) {
                event.preventDefault();
                submitInput(userInput)
            });

            // Clear chat thread
            const newConversationBtn = document.getElementById("new-conversation-btn");
            newConversationBtn.addEventListener("click", function(event) {
                event.preventDefault();
                messages = [];
                chatThread.innerHTML = "";
                exampleButtons.style.display = "inherit";
            });

            // Fix input height to fit content
            function fixInputHeight() {
                userInput.style.height = 'auto';
                userInput.style.height = userInput.scrollHeight + 'px';
            }
            userInput.addEventListener("input", function(event) {
                fixInputHeight()
            });
            fixInputHeight()


            // Light/dark theme setup, default to dark if nothing found
            const sunIcon = document.getElementById("sun-icon");
            const moonIcon = document.getElementById("moon-icon");
            function toggleIcons() {
                const isDarkMode = document.documentElement.classList.contains("dark");
                if (isDarkMode) {
                    sunIcon.classList.remove("hidden");
                    moonIcon.classList.add("hidden");
                } else {
                    sunIcon.classList.add("hidden");
                    moonIcon.classList.remove("hidden");
                }
            }
            let prefersDark = true
            if (window.matchMedia) prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
            document.documentElement.classList.toggle('dark', prefersDark);
            toggleIcons();
            const themeSwitchBtn = document.getElementById("theme-switch-btn");
            function toggleDarkMode() {
                const doc = document.documentElement;
                doc.classList.toggle("dark");
                toggleIcons();
            }
            themeSwitchBtn.addEventListener("click", toggleDarkMode);

            // Toggle mobile navigation menu
            const mobileNavBtn = document.getElementById("mobile-nav-btn");
            const navBtnsMobile = document.getElementById("nav-btns-mobile");
            mobileNavBtn.addEventListener("click", () => {
                navBtnsMobile.classList.toggle("hidden");
            });

        });

        function extractSparqlInfo(markdownContent) {
            // Regular expression to match SPARQL queries within code blocks
            const queryRegex = /```sparql([\s\S]*?)```/g;
            const queries = [...markdownContent.matchAll(queryRegex)].map(match => match[1].trim());

            // Get the last SPARQL query
            const lastQuery = queries.length > 0 ? queries[queries.length - 1] : null;
            if (!lastQuery) return { endpointUrl: null, lastQuery: null };

            const endpointRegex = /#.*(https?:\/\/[^\s]+)/i;
            const endpointMatch = lastQuery.match(endpointRegex);
            const endpointUrl = endpointMatch ? endpointMatch[1] : null;
            console.log({ endpointUrl, lastQuery })
            return { endpointUrl, lastQuery };
        }
    </script>

    <style>
        a {
            color: #007BFF;
        }
        a:hover {
            color: #0056b3;
        }

        [data-tooltip].tooltip-top:before {
            bottom: 50px;
            left: 0px;
        }

        /* Add tooltip for top nav on desktop */
        @media (min-width: 640px) {
            [data-tooltip] {
                position: relative;
                cursor: pointer;
                white-space: nowrap;
            }
            [data-tooltip]:before {
                content: attr(data-tooltip);
                position: absolute;
                bottom: -50px;
                left: 50%;
                transform: translateX(-50%);
                padding: 0.5rem;
                background-color: #333;
                color: white;
                font-size: 0.9rem;
                font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
                border-radius: 4px;
                opacity: 0;
                pointer-events: none;
                transition: opacity 0.2s ease-in-out;
                white-space: normal;
                width: max-content;
                /* max-width: 100%;
                width: 30rem; */
            }
            [data-tooltip]:hover:before {
                opacity: 1;
            }
        }

        /* Menu for mobile navigation */
        .nav-btns-mobile {
            display: none;
        }
        @media (max-width: 640px) {
            .nav-btns-desktop {
                display: none;
            }
            .nav-btns-mobile {
                display: flex;
                align-items: center;
                gap: 1rem;
            }
            #nav-btns-mobile {
                position: absolute;
                top: 48px;
                right: 0;
                z-index: 10;
                background-color: rgb(71 85 105);
                border: 1px solid #ccc;
                border-radius: 4px;
            }
            .nav-btns-mobile.show {
                display: flex;
            }
        }
    </style>

</body>
</html>