<script>
    import Avatar from "../account/Avatar.svelte";
    import {getContext} from "svelte";
    import Dropdown from "../common/Dropdown.svelte";

    const channel = getContext("channel");
    const user = getContext("user");
    console.log( channel.commands)
</script>


<div class="top-nav ">
    <a class="top-nav-item" href="{channel.lucentUrl}/members">Members</a>

    {#if channel.commands.length > 0}
        <Dropdown>
            <div slot="button">Actions</div>
            {#each channel.commands as command}
                <a href="{channel.lucentUrl}/command-report/{command.signature}" class="top-nav-item">{command.name}</a>
            {/each}
        </Dropdown>

    {/if}
    <!--        <div>-->
    <!--            <form method="GET">-->
    <!--                <input type="search" name="filter[search_regex]" placeholder="Search"-->
    <!--                       class="form-control" required/>-->
    <!--            </form>-->
    <!--        </div>-->
    <a href="{channel.lucentUrl}/profile">
        <Avatar side="28" name={user.name}/>
    </a>
</div>

