<script lang="ts">
  import { onMount } from "svelte";
  import Header from "./components/HeaderComponent.svelte";
  import { base, initializeBase } from "./stores/basestore";
  import { fetchIsUserLoggedIn } from "./stores/authstore";
  import { fetchProviders } from "./stores/providerstore";
  import { Route, Router } from "svelte-routing";
  import { PATHS } from "./config/paths";
  import Bekijken from "./pages/Bekijken.svelte";
  import Welkom from "./pages/Welkom.svelte";
  import Fout from "./pages/Annuleren.svelte";

  initializeBase();

  onMount(async () => {
    await fetchIsUserLoggedIn();
    await fetchProviders();
  });
</script>

<div class="container">
  <Header />
  <Router>
    <Route component={Welkom} path="{$base}{PATHS.WELKOM}" />
    <Route component={Bekijken} path="{$base}{PATHS.BEKIJKEN}" />
    <Route component={Fout} path="{$base}{PATHS.ANNULEREN}" />
  </Router>
</div>
