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

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

<Dropdown nav inNavbar active={$current_theme && $current_theme.id != 0}>
    <DropdownToggle nav caret>
        <Icon name="tv" />
        Scenarii
    </DropdownToggle>
    <DropdownMenu class="niceborder">
        <div>
            {#each $themes as th, index}
                {#if th.id != 0}
                    <DropdownItem href="{th.urlid}" active={$current_theme && $current_theme.id == th.id}>
                        {th.name}
                        {#if $my && $my.team_id && th.exercice_count && $myThemes[th.id].exercice_solved >= th.exercice_count}
                            <Badge color="success" pill>
                                <Icon name="check" />
                            </Badge>
                        {/if}
                        {#if $max_solved > 1 && th.solved == $max_solved}
                            <Badge color="danger" pill>
                                <Icon name="heart-fill" />
                            </Badge>
                        {/if}
                        {#if th.exercice_coeff_max > 1}
                            <Badge color="warning" pill>
                                <Icon name="gift-fill" />
                            </Badge>
                        {/if}
                        {#if th.locked}
                            <Badge color="secondary" pill>
                                <Icon name="lock-fill" />
                            </Badge>
                        {/if}
                        <Badge>
                            {#if $my && $my.team_id}{$myThemes[th.id].exercice_solved}/{/if}{th.exercice_count}
                        </Badge>
                    </DropdownItem>
                {/if}
            {/each}
        </div>
    </DropdownMenu>
</Dropdown>
{#if $themesStore && $themesStore["0"] && $themesStore["0"].exercices}
    <Dropdown nav inNavbar active={$current_theme && $current_theme && $current_theme.id == 0}>
        <DropdownToggle nav caret>
            <Icon name="box-seam" />
            Défis
        </DropdownToggle>
        <DropdownMenu class="niceborder">
            <div>
                {#each $themesStore["0"].exercices as exercice, index}
                    <DropdownItem href="{$themesStore["0"].urlid}/{exercice.urlid}" active={$current_theme && $current_theme.id == 0 && $current_exercice && $current_exercice.id == exercice.id}>
                        {exercice.title}
                        {#if $my && $my.id_team && exercice.solved}
                            <Badge color="success" pill>
                                <Icon name="check" />
                            </Badge>
                        {/if}
                        {#if exercice.curcoeff > 1}
                            <Badge color="warning" pill>
                                <Icon name="gift-fill" />
                            </Badge>
                        {/if}
                        {#if $themesStore["0"].locked || exercice.disabled || ($my && !$my.exercices[exercice.id])}
                            <Badge color="secondary" pill>
                                <Icon name="lock-fill" />
                            </Badge>
                        {/if}
                    </DropdownItem>
                {/each}
            </div>
        </DropdownMenu>
    </Dropdown>
{/if}

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