<script>
  import { Router, Route } from "svelte-routing";

  // components for this layout
  import AdminNavbar from "components/Navbars/AdminNavbar.svelte";
  import Sidebar from "components/Sidebar/Sidebar.svelte";
  import HeaderStats from "components/Headers/HeaderStats.svelte";
  import FooterAdmin from "components/Footers/FooterAdmin.svelte";
  import GlobalHeader from "components/Headers/GlobalHeader.svelte";

  // pages for this layout
  import Dashboard from "views/admin/Dashboard.svelte";
  import Settings from "views/admin/Settings.svelte";
  import Tables from "views/admin/Tables.svelte";
  import wgLogs from "views/admin/wgLogs.svelte";
  import wgProfiles from "views/admin/wgProfiles.svelte";
  import wgBlast from "views/admin/wgBlast.svelte";
  import Maps from "views/admin/Maps.svelte";

  export let location;
  let collapseshow = '';
  export let admin = "";
</script>

<div>
    <Sidebar bind:collapseshow={collapseshow} location={location}/>
    <div class="relative md:ml-64 bg-blueGray-100">
      <AdminNavbar bind:collapseshow={collapseshow} />
      <GlobalHeader />
      <div class="px-4 md:px-10 mx-auto w-full -m-24">
        <Router url="admin">
          <Route path="dashboard" component="{Dashboard}" />
          <Route path="settings" component="{Settings}" />
          <Route path="tables" component="{Tables}" />
          <Route path="wgLogs" component="{wgLogs}" />
          <Route path="wgProfiles" component="{wgProfiles}" />
          <Route path="wgBlast" component="{wgBlast}" />
          <Route path="maps" component="{Maps}" />
        </Router>
        <FooterAdmin />
      </div>
    </div>
</div>
