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

 import ThemeNav from '$lib/components/ThemeNav.svelte';

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

<svelte:head>
    <title>{$current_exercice?$current_exercice.title+" - ":""}{$challengeInfo.title}</title>
</svelte:head>

{#if $current_exercice === null}
    <div 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>
    </div>
{:else if !$current_exercice}
    <Alert color="warning" class="mt-3" fade={false}>
        <Icon name="dash-circle-fill" />
        Vous n'avez pas encore accès à ce défi.
    </Alert>
{:else}
    {#if $current_theme.id != 0}
        <ThemeNav theme={$current_theme} exercice={$current_exercice} />
    {/if}
    <slot></slot>
{/if}
