<script context="module">
 import { get_store_value } from 'svelte/internal';

 import { themes } from '../../stores/themes.js';

 export async function load({ page, fetch, session, context }) {
     const thms = get_store_value(themes);

     let theme = null;
     for (let th in thms) {
         if (thms[th] && thms[th].urlid === page.params.theme) {
             theme = thms[th];
             break;
         }
     }

     return {
         context: {
             ...context,
             theme: theme,
         }, props: {
             theme: theme,
         }
     };
 }
</script>

<script>
 import {
     Container,
 } from 'sveltestrap';

 import { settings } from '../../stores/settings.js';

 export let theme;
</script>

<svelte:head>
    <title>{theme?theme.name:""} - {$settings.title}</title>
</svelte:head>

{#if theme}
<div style="background-image: url({theme.image})" class="page-header">
    <Container class="text-primary">
	<h1 class="display-2">
            <a href="/{theme.urlid}">{theme.name}</a>
        </h1>
	<h2>{@html theme.authors}</h2>
    </Container>
    <div class="headerfade"></div>
</div>
{/if}
<Container>
    <slot></slot>
</Container>

<style>
 .page-header {
     background-size: cover;
     background-position: center;
     margin-bottom: -15rem;
 }
 .page-header h1 {
     text-shadow: 0 0 15px rgba(255,255,255,0.95), 0 0 5px rgb(255,255,255)
 }
 .page-header h1, .page-header h1 a {
     color: black;
     text-decoration: none;
 }
 .page-header h2 {
     font-size: 100%;
     text-shadow: 1px 1px 1px rgba(0,0,0,0.9)
 }
 .page-header h2, .page-header h2 a {
     color: #4eaee6;
 }
 .page-header h2 a:hover {
     text-decoration: underline;
 }
 .page-header h1 {
     padding-top: 4rem;
     text-align: center;
 }
 .page-header h2 {
     padding-bottom: 14rem;
     text-align: center;
 }

 .page-header .headerfade {
     background: linear-gradient(transparent 0%, rgb(233,236,239) 100%);
     height: 3rem;
 }
</style>
