<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">
        {#if page.data.login}
          Logged in as <a href="/settings" aria-label="Settings">
            {page.data.login}
          </a>
          <a href="/logout" aria-label="Log out">
            <span class="ms-2 icon-[tdesign--logout]"></span>
          </a>
        {/if}
      </div>
    </div>
  </div>
  <main class="flex-1 px-3 container mx-auto">
    <slot />
  </main>
  <footer class="neg flex items-center justify-between px-4 min-h-16">
    <div class="container mx-auto">
      © 2022 by the Pijul team
      <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>