<script lang="ts">
  import "./app.css";
  import { Navbar, NavBrand, DarkMode, Button } from "flowbite-svelte";
  import { Router, Route, Link } from "svelte-routing";
  import Home from "./routes/Home.svelte";
  import "./app.css";
  import Tournament from "./routes/Tournament.svelte";
  export let url = "";
</script>

<main class="flex-col h-screen items-center bg-gray-50 dark:bg-gray-800">
  <Router bind:url>
    <Navbar>
      <NavBrand>
        <Link to="/">Tournaments</Link>
      </NavBrand>
      <DarkMode />
    </Navbar>
    <div>
      <Route path="/"><Home /></Route>
      <Route path="/tournament/:id" let:params>
        <Tournament id={parseInt(params.id)} />
      </Route>
    </div>
  </Router>
</main>
