<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.js';
  const title = 'Versions';
  const variable = { title: '' };

  async function getData() {
    const url = 'https://owlboard.info/misc/server/versions';
    const res = await fetch(url);
    return await res.json();
  }
</script>

<Header {title} />

<LargeLogo />

{#await getData()}
  <Loading />
{:then data}
  <Island>
    <p>
      Web-app Version<br /><span class="data">{version}-{versionTag}</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>
{:catch}
  <Island>
    <p>
      Web-app Version<br /><span class="data">{version}-{versionTag}</span>
    </p>
    <p>Unable to fetch server versions</p>
  </Island>
{/await}
<Nav />

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