<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");
</script>

<div class="top-nav">
    {#if channel.auth == "lucent"}
        <a class="top-nav-item" href="{channel.lucentUrl}/members">Members</a>
    {:else}
        <a href="/lunar">Store admin</a>
    {/if}
    {#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>-->
    {#if channel.auth == "lucent"}
        <a href="{channel.lucentUrl}/profile">
            <Avatar side="28" name={user.name} />
        </a>
    {:else}
        <Avatar side="28" name={user.name} />
    {/if}
</div>
