<script lang="ts">
  import { Router, Route } from "svelte-navigator";
  import { onMount } from "svelte";

  import { user } from "./stores";

  import Navbar from "./Navbar.svelte";
  import P404 from "./pages/P404.svelte";
  import Mining from "./pages/mining/Mining.svelte";
  import Footer from "./Footer.svelte";
  import BaseLayout from "./BaseLayout.svelte";
  import Monitoring from "./pages/monitoring/Monitoring.svelte";
    import Bar from "./pages/playground/Bar.svelte";

  onMount(async () => {
    const res = await fetch("/user/me");
    $user = await res.json();
  });
</script>

<Router>
  <Route path="/">
    <BaseLayout>
      <section class="section">
        <p>Hallo i bims 1 frontend</p>
      </section>
    </BaseLayout>
  </Route>

  <Route path="foo">
    <BaseLayout>
      <section class="hero is-danger is-fullheight">
        <div class="hero-body">
          <div class="">
            <p class="title">Fullheight hero</p>
            <p class="subtitle">Fullheight subtitle</p>
          </div>
        </div>
      </section>
    </BaseLayout>
  </Route>

  <Route path="bar">
    <BaseLayout><Bar /></BaseLayout>
  </Route>

  <Route path="monitoring/*">
    <BaseLayout><Monitoring /></BaseLayout>
  </Route>

  <Route path="mining">
    <Mining />
  </Route>

  <Route path="stats">
    <BaseLayout>stats</BaseLayout>
  </Route>

  <Route>
    <BaseLayout><P404 /></BaseLayout>
  </Route>
</Router>
