<script>
  import Page from "$lib/Page.svelte";
  import { extractAnchors, toAnchor } from '$lib/anchors';
  import Pages from "$lib/Pages.svelte";
  export let page;
  export let pages;
  export let loc;
</script>

<style>
  .stuff {
    display: flex;
    flex-direction: row;
    gap: 1em;
    max-width: 100%;
  }
  .side {
    min-width: 120px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    height: max-content;
  }
  nav {
    margin-top: 40px;
    margin-bottom: 40px;
    margin-left: 0px;
    margin-right: 0px;
  }
  content {
    padding: 8px;
    min-width: 0;
  }
  .other {
    color: #888;
    margin-top: 2em;
    max-width: 90%;
    padding-left: 4em;
    padding-right: 4em;
    text-align: center;
    padding-bottom: 1em;
    margin-bottom: 1em;
    border-bottom: 1px solid #888;
  }

  .viewall {
    margin-top: 2em;
    font-size: 0.9em;
    color: #bbb;
  }

  @media screen and (max-width: 1300px) {
    .side {
      display: none;
    }
  }
  li {
    padding-top: 0.1em;
    padding-bottom: 0.1em;
  }
  li a {
    text-decoration: none;
    color: #444;
    font-weight: 400;
    transition: 0.1s font-weight;
  }
  li a:hover {
    color: #111;
    font-weight: 500;
  }
  @media (prefers-color-scheme: dark) {
    li a {
      color: #eee;
    }
    li a:hover {
      color: #fff;
    }
  }
</style>

<svelte:head>
  <title>{page.name} - Guidebook</title>
  <meta name="description" content="{page.description || 'A Guidebook guide!'}" />
</svelte:head>

<div class="stuff">
  <div class="side">
    <nav>
      <el>
        {#each extractAnchors(page.content) as anchor}
        {#if anchor.level === 2}
        <li style="margin-left: {Math.max(anchor.level - 2, 0) * 0.3}em">
          <a href="#{toAnchor(anchor.name)}">
            {anchor.name}
          </a>
        </li>
        {/if}
        {/each}
      </el>
    </nav>
  </div>
  <content>
    <Page content={page.content}/>
  </content>
</div>

{#if pages && pages.length > 0}
  <div class="other">Other pages in this category:</div>
  <br>
  <Pages pages={pages.slice(0, 3)}/>
  <a class="viewall" href="/p/{page.path.split('/').slice(0, -1).join('/') + '/'}">View all pages in <b>{loc}</b></a>
{/if}