<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 { onMount } from 'svelte';
    const title = "Versions" 
    const variable = {title:""};  

    let data, isLoading = true;

    async function getData() {
      const url = 'https://owlboard.info/misc/server/versions'
      const res = await fetch(url)
      data = await res.json();
      isLoading = false;
    }        

    onMount(() => {
      getData();
    });

</script>
 
<Header {title} />

<LargeLogo />

{#if isLoading}
  <Loading/>    
{:else}
  <Island>
    <p>Web-app Version<br><span class="data">{"2023.7.1-Svelte-Dev"}</span></p>
    <p>API Server Version<br><span class="data">{data.backend}</span></p>
    <p>DBManager Version<br><span class="data">{data['db-manager']}</span></p>
  </Island>
{/if}
<Nav />

<style>
  .data {color: white;}
</style>