<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';
  const title = 'Versions';

  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>
      <a class="data" href="https://git.fjla.uk/owlboard/owlboard-svelte" target="_blank">Web-app version<br /><span class="data">{version}-{versionTag}</span></a>
    </p>
    <p>
      <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>
      <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>
      <a class="data" href="https://git.fjla.uk/owlboard/mq-client" target="_blank">MQ Client version<br /><span class="data">{data?.['mq-client'] || 'Not installed'}</span></a>
    </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>
  p {
    text-decoration: none;
  }
  .data {
    color: white;
    text-decoration: none;
  }
</style>
