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

 import { my } from '../stores/my.js';
 import { tags } from '../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() as itag, index}
                {#if 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>
