<script lang="ts">
  import { goto } from '$app/navigation';
  import { logout, storedUser } from '$lib/auth/session';
  import type { StoredUser } from '$lib/auth/session';

  let user: StoredUser | null = null;
  storedUser.subscribe((value) => {
    user = value;
  });

  function handleLogout() {
    logout();
    goto('/');
  }
</script>

<nav>
  <ul>
  <li class="inline">
    <a href="/">Home</a>
    {#if user}
      <a href={`/users/${user.id}/todos`}>Todos</a>
      <a href={`/users/${user.id}`}>My Profile</a>
      {#if user.isAdmin}
        <a href={`/users/all`}>All Users</a>
      {/if}
      <button on:click={handleLogout}>Log Out</button>
    {:else}
      <a href="/login">Log In</a>
    {/if}
  </li>
  </ul>
</nav>
