<script>
  import { logout_user } from '$/client/api.js';
  import Icon from '$/client/components/Icon.svelte';
  import Darkmode from '$/client/components/Darkmode.svelte';
  import {link} from 'svelte-spa-router';
  import { user } from "$/client/stores.js";

  export let fixed = false;
</script>

<header class:fixed>
  <nav>
      {#if $user.authenticated}
        <a href="/client/#/"><Icon name="home" tooltip="Back to app." size="36" /></a>
        <ul>
          {#if $user.admin }
            <li><a href="/" use:link><Icon name="keyboard" tooltip="Admin Dashboard."/></a></li>
          {/if}

          <li><a href="/" on:click|preventDefault={ logout_user } data-testid="logout-link"><Icon name="log-out" tooltip="Log out."/></a></li>
          <li><Darkmode /></li>
      </ul>
      {:else}
        <a href="/client/#/">Login</a>
      {/if}
  </nav>
</header>
