<script>
 import {
     Breadcrumb,
     BreadcrumbItem,
     Card,
     Icon,
 } from 'sveltestrap';

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

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

<Breadcrumb listClassName="mb-0 px-3 py-2">
    {#each Object.keys(theme.exercices) as k, index}
        <BreadcrumbItem active={k == exercice.id}>
            {#if k == exercice.id}
	        <strong class="text-info">
		    {theme.exercices[k].title}
                    {#if theme.exercices[k].curcoeff > 1.0}
                        <Icon name="gift" aria-hidden="true" />
                    {/if}
                    {#if $my && $my.team_id && $my.exercices[k] && $my.exercices[k].solved}
		        <Icon name="check" class="text-success" aria-hidden="true" />
                    {/if}
	        </strong>
            {:else if $my && $my.exercices[k]}
	        <a href="/{theme.urlid}/{theme.exercices[k].urlid}" class:text-success={$my.exercices[k].solved}>
		    {theme.exercices[k].title}
                    {#if theme.exercices[k].curcoeff > 1.0}
                        <Icon name="gift" aria-hidden="true" />
                    {/if}
                    {#if $my.team_id && $my.exercices[k].solved}
		        <Icon name="check" class="text-success" aria-hidden="true" />
                    {/if}
	        </a>
            {:else}
	        <span class="text-muted">
                    {theme.exercices[k].title}
                    {#if theme.exercices[k].curcoeff > 1.0}
                        <Icon name="gift" aria-hidden="true" />
                    {/if}
                </span>
            {/if}
        </BreadcrumbItem>
    {/each}
</Breadcrumb>

<style>
 a {
     text-decoration: none;
 }
 a[href]:hover {
     text-decoration: underline;
 }
</style>
