<script>
  import Layout from "$/client/Layout.svelte";
  import Icon from "$/client/components/Icon.svelte";
  import { onMount } from "svelte";
  import { user } from "$/client/stores.js";

  let activate_warning = false;

  onMount(() => {
    setTimeout(() => activate_warning = true, 1000);
  });
</script>

<Layout testid="home-page" authenticated={ true }>
  <h1>Welcome!</h1>
  {#if $user.admin}
    <p><b>You are logged in as administrator.</b> You can use the admin icon <a href="/admin/"><Icon name="keyboard" /></a> in the top header to access the dashboard.  You can also type <code>ctrl-alt-b</code> to access quick links to helpful developer tools in the dashboard.
    </p>
  {:else}
    <p>You are not flagged as an administrator. Use <code>sqlite3</code> to change your user to have <code>admin=1</code> in the database, then reload.</p>
  {/if}

  <toast-list class="bottom right active" class:active={ activate_warning }>
    <toast>
      Edit <code>client/pages/Home.svelte</code> to start your
      project. Use ctrl-alt-b to view the tools.
    </toast>
  </toast-list>
</Layout>
