<script>
  import { onMount } from "svelte";
  import { applyAction, enhance } from "$app/forms";
  import { page } from "$app/stores";
  // import Developer from "$lib/img/hero-image.png";
  import Avatar from "$lib/img/TeamAvatar.jpeg";
  onMount(() => {
    console.log("Page data in Header:", $page);
  });

  $: {
    console.log("Page data updated:", $page);
  }
</script>

<header class="header">
  <div class="header-container">
    <div class="header-left">
      <div class="header-crafted-by-container">
        <!-- <a href="https://tiny-bits.net/">
          <span>Developed by</span><img
            src={Developer}
            alt="Alexander Stölting"
          /> -->
        <!-- </a> -->
      </div>
    </div>
    <div class="header-right">
      <div class="header-nav-item" class:active={$page.url.pathname === "/"}>
        <a href="/">home</a>
      </div>
      {#if !$page.data.user}
        <div
          class="header-nav-item"
          class:active={$page.url.pathname === "/auth/login"}
        >
          <a href="/auth/login">login</a>
        </div>
        <!-- <div
                    class="header-nav-item"
                    class:active={$page.url.pathname === "/auth/register"}
                >
                    <a href="/auth/register">register</a>
                </div> -->
      {:else}
        <div class="header-nav-item">
          <a href="/auth/about/{$page.data.user.id}">
            <img
              src={$page.data.user.thumbnail
                ? $page.data.user.thumbnail
                : Avatar}
              alt={`${$page.data.user.first_name} ${$page.data.user.last_name}`}
            />
          </a>
        </div>
        <!-- {#if $page.data.user.is_superuser}
          <div
            class="header-nav-item"
            class:active={$page.url.pathname.startsWith("/auth/admin")}
          >
            <a href="/auth/admin">admin</a>
          </div>
        {/if} -->
        <form
          class="header-nav-item"
          action="/auth/logout"
          method="POST"
          use:enhance={async () => {
            return async ({ result }) => {
              await applyAction(result);
            };
          }}
        >
          <button type="submit">logout</button>
        </form>
      {/if}
    </div>
  </div>
</header>
