<script>
 import { goto } from '$app/navigation';

 import {
     Button,
     Icon,
 } from 'sveltestrap';

 import { themes, themesIdx } from '$lib/stores/themes';

 export let theme = null;
 export let exercice = {};
 export let query_selected = null;
</script>

<h2>
    {#if query_selected}
        <Button
            class="float-start"
            color="link"
            on:click={() => goto(theme?`themes/${theme.id}/${exercice.id}`:`exercices/${exercice.id}`)}
        >
            <Icon name="chevron-left" />
        </Button>
    {:else if theme}
        <Button
            class="float-start"
            color="link"
            on:click={() => goto('themes/' + theme.id)}
        >
            <Icon name="chevron-left" />
        </Button>
    {:else}
        <Button
            class="float-start"
            color="link"
            on:click={() => goto('exercices/')}
        >
            <Icon name="chevron-left" />
        </Button>
    {/if}
    {exercice.title}
    {#if exercice.wip}
        <Icon name="cone-striped" />
    {/if}
    {#if $themes.length && $themesIdx[exercice.id_theme]}
        <small>
            <a href="themes/{exercice.id_theme}" title={$themesIdx[exercice.id_theme].authors}>{$themesIdx[exercice.id_theme].name}</a>
        </small>
        <a href="../{$themesIdx[exercice.id_theme].urlid}/{exercice.urlid}" target="_self" class="float-right ml-2 btn btn-sm btn-info"><Icon name="play-fill" /> Site du challenge</a>
    {/if}
</h2>
