<script>
  import { path } from "svelte-pathfinder";
  import Link from "./Link.svelte";
</script>

<Link path="/">Home</Link>
<Link path="/reporting">Reporting</Link>

{#if $path.pattern('reporting/:id?')}
  reporting page
{:else if $path.pattern('/')}Home page{:else}Not found{/if}

<script>
  import { url, path, query, fragment } from 'svelte-pathfinder';
  import { RootLO, BaseLO, Globals } from 'components';
  import { activeRoute } from 'utils';
  import { ROUTE } from 'const';
  import { RootPage, ReportingPage, NotFoundPage } from 'routes/root';
  import AuthBus from './AuthBus.svelte';
  let segment;
  $: segment = $path.toString();

</script>
<Globals>
  <AuthBus>
    <RootLO>
      <BaseLO {segment}>
        {#if $path.pattern(ROUTE.ROOT)} <!-- / -->
          <RootPage/>
        {:else if $path.pattern(ROUTE.REPORTING_BARE)} <!-- /reporting/:id? -->
          <ReportingPage/>
        {:else}
          <NotFoundPage path={$path.toString()} />
        {/if}
      </BaseLO>
    </RootLO>
  </AuthBus>
</Globals>

<style>
</style>