<!DOCTYPE html>
<!--
MAIN:
BACKGROUND: #1d1e21
CARDS: #151617
ELEMENTS (BUTTONS, ETC.): #26282b

COLORS:
BLUE: #0066ff
RED: #ff0000
YELLOW: #fff700
-->
<html lang="en">
    <%- include("header") %>
<body class="bg-[#1a1c1f]">
    <%- include("components/navbar") %>
    <% if (other.admin) { %>
    <%-    include("components/sidebar_admin"); %>
    <% } else { %>
    <%-    include("components/sidebar") %>
    <% }  %>
    <div id="container" class="m-8 sm:ml-72 sm:mr-8 sm:mt-24"></div>
</body>
<script>
    // TABS
    const container = document.querySelector("#container");
    async function switchTab(tName) {
        const loc = new URL(`/tab/${tName}`, document.location.origin);
        await getTabContent(loc);
    }
    async function switchAdminTab(tName) {
        const loc = new URL(`/tab/admin/${tName}`, document.location.origin);
        await getTabContent(loc);
    }
    async function getTabContent(url) {
        try {
            const content = await fetch(url);
            container.innerHTML = await content.text();
            const tabScript = await container.querySelector("script");
            await tabScript.remove();
            console.log(`[#] Evaling script from URL ${url}...`);
            await eval(tabScript.innerHTML);
            console.log(`[#] Done evaling script from URL ${url}!`);
        } catch (err) {
            console.log(err);
        }
    }

    // DEFAULT TAB
    switchTab("welcome");
</script>
</html>