<script lang="ts">
  import { page } from '$app/stores';
  import '@fontsource/poppins';
  import '$lib/styles/base.css';
	import { str, strf } from '$lib/data/language';

  $: metaTitle =  ($page.data.title ?
                    $strf($page.data.title):
                    null
                  ) || 
                  ($page.data.album && $page.data.album.title ?
                    $strf($page.data.album.title):
                    null
                  ) || 
                  ($page.data.item ? 
                    $page.data.item.title ? 
                      $strf($page.data.item.title):
                      $page.data.item.item:
                    null
                  ) || 
                  $str('gallery');
  $: metaDescription = ($page.data.description ?
                        $strf($page.data.description):
                        null
                      ) || 
                      ($page.data.album && $page.data.album.description ?
                        $strf($page.data.album.description):
                        null
                      ) || 
                      ($page.data.item ? 
                        $page.data.item.description ? 
                          $strf($page.data.item.description):
                          $str('photo-description'):
                        null
                      ) || 
                      $str('gallery-description');
</script>

<svelte:head>
  <title>{metaTitle} | bosin.ch</title>
  <meta name="description" content={metaDescription} />
</svelte:head>

<slot />
