<script>
  import Router, { link, querystring } from 'svelte-spa-router'

  import Toasts from './components/Toasts.svelte'
  import Dev from './components/Dev.svelte'
  import Dashboard from './pages/Dashboard.svelte'
  import Limits from './pages/Limits.svelte'
  import Footer from './components/Footer.svelte'
  import Options from './pages/Options.svelte'

  import { isDev } from '../shared/utils'

  const routes = {
    '/': Dashboard,
    '/options': Options,
    '/limits': Limits,
  }

  $: nav = new URLSearchParams($querystring).get('nav') !== 'false'
</script>

{#if isDev}
  <Dev />
{/if}
<main>
  {#if nav}
    <div class="mb-8">
      <a use:link href="/"><button class="btn">Dashboard</button></a>
      <a use:link href="/limits"><button class="btn">Limits</button></a>
      <a use:link href="/options"><button class="btn">Options</button></a>
    </div>
  {/if}

  <Router {routes} />
  <Toasts />
  <Footer />
</main>

<style>
  main {
    padding: 1em;
    margin: auto;
    width: 100%;
    max-width: 50em;
  }
</style>
