<script lang="ts">
  import { page } from "$app/state";

  const { children } = $props();
</script>

<div class="admin-layout">
  {#if page.url.pathname !== "/admin/login"}
    <nav class="navbar">
      <menu class="left">
        <li><a href="/admin/photos">Photos</a></li>
        <li><a href="/admin/photos/upload">Upload a Photo</a></li>
        <li><a href="/blog/new">Write a new blog post</a></li>
      </menu>
      <menu class="right">
        <li>
          <a href="/admin/logout">Log Out</a>
        </li>
      </menu>
    </nav>
  {/if}

  {@render children()}
</div>

<style>
  .admin-layout {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: min-content auto;
    min-height: 100dvh;
  }
  .navbar {
    width: 100dvw;
    display: flex;
    flex-direction: row;
  }

  .right {
    display: flex;
    justify-content: flex-end;
  }

  .navbar menu {
    display: flex;
    flex-direction: row;
    gap: 4px;
    flex-grow: 1;
  }

  .navbar menu li {
    list-style: none;
  }

  li a::after {
    content: "";
  }
</style>
