<script lang="ts">
  import Header from './components/header.svelte';
  import Login from './components/login.svelte';
  import Main from './components/main.svelte';
  import ProgressTable from './components/progress-table.svelte';
  import './index.css';
  import { userstate } from './shared.svelte';
</script>

<a
  href="#main-content"
  class="absolute top-0 left-0 z-50 rounded-b-sm bg-pink-600 px-1 pt-0.5 text-xs text-gray-100 not-focus:sr-only focus:outline-none"
>
  Skip to main content
</a>

<Header></Header>
<Main>
  {#if !userstate.isLoggedIn}
    <Login></Login>
  {:else}
    <ProgressTable></ProgressTable>
  {/if}
</Main>
