<script>
 import {
     Badge,
     Dropdown,
     DropdownItem,
     DropdownMenu,
     DropdownToggle,
     Icon,
 } from 'sveltestrap';

 import { my } from '$lib/stores/my.js';
 import { max_solved } from '$lib/stores/themes.js';
 import { myThemes, themes } from '$lib/stores/mythemes.js';
</script>

<Dropdown nav inNavbar>
    <DropdownToggle nav caret>
        <Icon name="tv" />
        Scenarii
    </DropdownToggle>
    <DropdownMenu class="niceborder">
        <div>
            {#each $themes as th, index}
                <DropdownItem href="{th.urlid}">
                    {th.name}
                    {#if $max_solved > 1 && th.solved == $max_solved}
                        <Badge color="danger">
                            <Icon name="heart-fill" />
                        </Badge>
                    {/if}
                    {#if th.exercice_coeff_max > 1}
                        <Badge color="success">
                            <Icon name="gift-fill" />
                        </Badge>
                    {/if}
                    {#if th.locked}
                        <Badge color="light">
                            <Icon name="lock-fill" />
                        </Badge>
                    {/if}
                    <Badge>
                        {#if $my && $my.team_id}{$myThemes[th.id].exercice_solved}/{/if}{th.exercice_count}
                    </Badge>
                </DropdownItem>
            {/each}
        </div>
    </DropdownMenu>
</Dropdown>

<style>
 div {
     overflow-y: auto;
     max-height: calc(80vh - 100px);
 }
</style>
