<script>
 import {
     Alert,
     Container,
     Icon,
     Spinner,
 } from '@sveltestrap/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 = "";
 let background_color = "#ffffff";
 let color_brightness = 0;
 $: color_brightness = parseInt(background_color[1], 16) + parseInt(background_color[3], 16) + parseInt(background_color[5], 16);
 $: if ($current_theme) {
     if ($current_exercice && $current_exercice.background_color) {
         background_color = $current_exercice.background_color;
         document.body.style.backgroundColor = $current_exercice.background_color;
     } else if ($current_theme.background_color) {
         background_color = $current_theme.background_color;
         document.body.style.backgroundColor = $current_theme.background_color;
     } else {
         background_color = "#ffffff";
         document.body.style.backgroundColor = "";
     }

     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 py-4">
	    <h1
                class="display-2"
                style:text-shadow={color_brightness < 24 ? "0 0 15px rgba(255,255,255,0.95), 0 0 5px rgb(255,255,255)" : "0 0 15px rgba(0,0,0,0.95), 0 0 5px rgb(0,0,0)"}
            >
                <a
                    href="{$current_theme.urlid}"
                    style:color={background_color}
                >
                    {#if $current_theme.urlid == "_" && $current_exercice}
                        {$current_exercice.title}
                    {:else}
                        {$current_theme.name}
                    {/if}
                </a>
            </h1>
	    <h2>
                {#if current_authors}
                    {@html current_authors}
                {:else}
                    {$challengeInfo.authors}
                {/if}
            </h2>
        </Container>
        <Container class="pb-4">
            <slot></slot>
        </Container>
    </div>
{/if}

<style>
 .page-header {
     background-size: 100% auto;
     background-position: top center;
     background-repeat: no-repeat;
 }
 .page-header h1, .page-header h1 a {
     text-decoration: none;
     filter: invert(100%) hue-rotate(45deg) brightness(100%);
 }
 .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 {
     text-align: center;
 }
 .page-header h2 {
     text-align: center;
 }
</style>
