<script lang="ts">
  import "bootstrap/dist/css/bootstrap.min.css";
  import "bootstrap-icons/font/bootstrap-icons.css";

  import Navigation from "./nav/Navigation.svelte";
  import type { LayoutData } from "./$types";
  import { version } from "$app/environment";

  export let data: LayoutData;

  const versionMismatch = data.git_commit !== version && data.git_commit !== "[unknown]";
</script>

<svelte:head>
  <meta property="og:type" content="website" />
  <meta name="theme-color" content="#aa8ed6" />
  <meta property="og:site_name" content="pronouns.cc" />
</svelte:head>

<Navigation />
<div class="container">
  <slot />
  <footer>
    <hr />
    <p>
      pronouns.cc <a href="https://codeberg.org/u1f320/pronouns.cc/commit/{version}">{version}</a>
      {#if versionMismatch}
        (backend: <a href="https://codeberg.org/u1f320/pronouns.cc/commit/{data.git_commit}">
          {data.git_commit}
        </a>)
      {/if} &middot;
      <a href="/page/terms">Terms of service</a>
      - <a href="/page/privacy">Privacy policy</a>
    </p>
  </footer>
</div>
