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

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

 let filter = "";
</script>

<Dropdown nav inNavbar>
    <DropdownToggle nav caret>
        <Icon name="tags" />
        Tags
    </DropdownToggle>
    <DropdownMenu class="niceborder" end>
	<input
            type="text"
            class="dropdown-item"
            placeholder="Filtrer"
            bind:value={filter}
        >
        <div>
            {#each Object.keys($tags).sort(function (a, b) { return a.toLowerCase().localeCompare(b.toLowerCase()); }) as itag, index}
                {#if (filter === "" && $tags[itag].count > 1) || (filter !== "" && itag.toLowerCase().indexOf(filter.toLowerCase()) >= 0)}
                    <DropdownItem href="tags/{itag}">
                        #{itag}
                        <Badge>
                            {#if $my && $my.team_id}{$tags[itag].solved}/{/if}{$tags[itag].count}
                        </Badge>
                    </DropdownItem>
                {/if}
            {/each}
        </div>
    </DropdownMenu>
</Dropdown>

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