<script>
  import { page } from '$app/state';
  import '../app.css';
</script>

<div class="flex flex-col min-h-screen">
  <div class="navbar neg">
    <div class="container mx-auto flex">
      <div class="my-2">
        <a href="/">The Nest (beta)</a>
      </div>
      <div class="my-2 ms-auto flex items-center gap-1">
        {#if page.data.login}
          <div>
            Logged in as <a href="/settings" aria-label="Settings">
              {page.data.login}
            </a>
          </div>
          <a href="/logout" aria-label="Log out">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="size-5 ms-1 inline">
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M5.636 5.636a9 9 0 1 0 12.728 0M12 3v9" />
            </svg>
          </a>
        {/if}
      </div>
    </div>
  </div>
  <main class="flex-1 px-3 container mx-auto">
    <slot />
  </main>
  <footer class="neg flex items-center w-full px-4 min-h-16">
    <div class="mx-auto flex gap-5">
      <div>© 2022 by the Pijul team</div>
      <a href="/privacy">Privacy policy</a>
      <a href="/terms">Terms</a>
    </div>
  </footer>
</div>

<style>
  .neg {
    color: #fff;
    background-color: #000;
  }
  .neg a {
    color: #fff;
    font-weight: bold;
    text-decoration: none;
  }
</style>