<script lang="ts">
  import { Router, Route, createHistory } from "svelte-navigator";
  import createHashSource from "./util/history";
  import Header from "./components/layout/Header.svelte";
  import Footer from "./components/layout/Footer.svelte";
  import Home from "./views/Home.svelte";
  import Browse from "./views/Browse.svelte";
  import Search from "./views/Search.svelte";
  import DropPasteHandler from "./components/DropPasteHandler.svelte";
  import AddModal from "./components/AddModal.svelte";
  import Store from "./views/Store.svelte";
  import Surface from "./views/Surface.svelte";

  import "./styles/main.scss";

  const history = createHistory(createHashSource());
</script>

<Router {history} primary={false}>
  <Header />
  <main>
    <Route path="/">
      <Home />
    </Route>

    <Route path="/browse/*addresses" let:params>
      <Browse />
    </Route>

    <Route path="/search/:query" let:params>
      <Search query={decodeURIComponent(params.query)} />
    </Route>

    <Route path="/surface">
      <Surface />
    </Route>

    <Route path="/store">
      <Store />
    </Route>

    <Footer />

    <AddModal />
  </main>
</Router>

<DropPasteHandler />
