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

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

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

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