<script lang="ts">
  import "./app.css";
  import { Navbar, NavBrand, DarkMode } from "flowbite-svelte";
  import { Router, Route, Link, navigate } from "svelte-routing";
  import Home from "./routes/Home.svelte";
  import "./app.css";
  import Tournament from "./routes/Tournament.svelte";
  interface Props {
    url?: string;
  }

  let { url = $bindable("") }: Props = $props();
</script>

<main class="flex-col h-screen items-center bg-gray-50 dark:bg-gray-800">
  <Navbar>
    <NavBrand on:click={() => navigate("", { replace: true })}>
      <span>Tournamenter</span>
    </NavBrand>
    <DarkMode />
  </Navbar>
  <Router bind:url>
    <div>
      <Route path="/"><Home /></Route>
      <Route path="/tournament/:id" 
        >{#snippet children({ params })}
                <Tournament id={params.id} />              {/snippet}
            </Route
      >
    </div>
  </Router>
</main>
