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

 import { challengeInfo } from '$lib/stores/challengeinfo';
 import { current_exercice } from '$lib/stores/exercices';
 import { current_theme } from '$lib/stores/themes';

 let heading_image = "";
 let current_authors = "";
 $: if ($current_theme) {
     if ($current_exercice && $current_exercice.image) {
         heading_image = $current_exercice.image;
     } else {
         heading_image = $current_theme.image;
     }

     if ($current_exercice && $current_exercice.authors) {
         current_authors = $current_exercice.authors;
     } else {
         current_authors = $current_theme.authors;
     }
 } else {
     heading_image = "";
     current_authors = "";
 }
</script>

<svelte:head>
    <title>{$current_theme?($current_theme.name + " - "):""}{$challengeInfo.title}</title>
</svelte:head>

{#if $current_theme === null}
    <Container class="d-flex justify-content-center mt-5 text-dark align-items-center">
        <Spinner size="lg" type="border" color="dark" />
        <span class="ms-3 display-6">Chargement en cours&hellip;</span>
    </Container>
{:else if !$current_theme}
    <Container>
        <Alert color="danger" class="mt-3" fade={false}>
            <Icon name="dash-circle-fill" />
            Ce scénario n'existe pas.
        </Alert>
    </Container>
{:else}
    <div style="background-image: url({heading_image})" class="page-header">
        <Container class="text-primary">
	    <h1 class="display-2">
                <a href="{$current_theme.urlid}">{$current_theme.name}</a>
            </h1>
	    <h2>{@html current_authors}</h2>
        </Container>
        <div class="headerfade"></div>
    </div>
    <Container>
        <slot></slot>
    </Container>
{/if}

<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>
