<script>
    import Header from "$lib/navigation/header.svelte";
    import Island from "$lib/islands/island.svelte";
    import Loading from "$lib/navigation/loading.svelte";
    import Nav from "$lib/navigation/nav.svelte";
    import LargeLogo from "$lib/images/large-logo.svelte";
    import { version, versionTag } from "$lib/stores/version";
    import { getApiUrl } from "$lib/scripts/upstream";
    import { IconBrandGolang, IconBrandJavascript, IconBrandNodejs, IconBrandPython, IconBrandSvelte, IconBrandTypescript } from "@tabler/icons-svelte";
    import Tooltip from "$lib/Tooltip.svelte";
    const title = "Versions";

    async function getData() {
        const url = `${getApiUrl()}/misc/server/versions`;
        const res = await fetch(url);
        return await res.json();
    }
</script>

<svelte:head>
    <meta name="robots" content="noindex">
</svelte:head>

<Header {title} />

<LargeLogo />

{#await getData()}
    <Loading />
{:then data}
    <Island>
        <p>
            <Tooltip text="Svelte"><IconBrandSvelte /></Tooltip>
            <Tooltip text="Javascript"><IconBrandJavascript /></Tooltip>
            <Tooltip text="Typescript"><IconBrandTypescript /></Tooltip>
            <br />
            <a class="data" href="https://git.fjla.uk/owlboard/owlboard-svelte" target="_blank"
                >Web-app version<br /><span class="data"
                    >{version}{#if versionTag}-{versionTag}{/if}</span
                ></a
            >
        </p>
        <p>
            <Tooltip text="NodeJS"><IconBrandNodejs /></Tooltip>
            <Tooltip text="Javascript"><IconBrandJavascript /></Tooltip>
            <Tooltip text="Typescript"><IconBrandTypescript /></Tooltip>
            <br />
            <a class="data" href="https://git.fjla.uk/owlboard/backend" target="_blank">API Server version<br /><span class="data">{data?.backend || "Unknown"}</span></a>
        </p>
        <p>
            <Tooltip text="Python"><IconBrandPython /></Tooltip>
            <br />
            <a class="data" href="https://git.fjla.uk/owlboard/db-manager" target="_blank">DB Manager version<br /><span class="data">{data?.["db-manager"] || "Unknown"}</span></a>
        </p>
        <p>
            <Tooltip text="Go"><IconBrandGolang /></Tooltip>
            <br />
            <a class="data" href="https://git.fjla.uk/owlboard/mq-client" target="_blank">timetable-mgr<br /><span class="data">{data?.["mq-client"] || "Not installed"}</span></a>
        </p>
    </Island>
{:catch}
    <Island>
        <p>
            <IconBrandSvelte /><IconBrandJavascript /><IconBrandTypescript /><br />
            Web-app Version<br /><span class="data"
                >{version}{#if versionTag}-{versionTag}{/if}</span
            >
        </p>
        <p>Unable to fetch server application versions</p>
    </Island>
{/await}
<Nav />

<style>
    p {
        text-decoration: none;
        padding: 15px;
    }
    .data {
        color: white;
        text-decoration: none;
    }
</style>
