<script lang="ts">
    import Navlink from "./Navlink.svelte";
    import { Link } from "svelte-navigator";

    import logo from "./assets/turtle.png";

    import { user } from "./stores";

    let menu_open = false;
</script>

<nav class="navbar">
    <div class="navbar-brand">
        <Link class="navbar-item" to="/">
            <img class="image is-24x24 mr-1" src={logo} alt="logo" />
            <span><strong>Control Panel</strong></span>
        </Link>
        <!-- svelte-ignore a11y-missing-attribute -->
        <a
            role="button"
            class="navbar-burger {menu_open ? 'is-active' : ''}"
            on:click={() => (menu_open = !menu_open)}
            aria-label="menu"
            aria-expanded="false"
        >
            <span aria-hidden="true" />
            <span aria-hidden="true" />
            <span aria-hidden="true" />
        </a>
    </div>
    <div class="navbar-menu {menu_open ? 'is-active' : ''}">
        <div class="navbar-start">
            <Navlink target="/foo" text="Foo" icon="fas fa-hippo" />
            <Navlink target="/bar" text="Bar" icon="fas fa-otter" />
            <Navlink target="/monitoring" text="Monitoring" icon="fas fa-binoculars" />
            <Navlink target="/mining" text="Mining" icon="fas fa-person-digging" />
            <Navlink target="/stats" text="Statistics" icon="fas fa-chart-line" />
        </div>

        <div class="navbar-end">
            {#if $user !== null}
                <div class="navbar-item has-dropdown is-hoverable">
                    <!-- svelte-ignore a11y-missing-attribute -->
                    <a class="navbar-link">
                        <img
                            class="image is-24x24 mr-2"
                            src={$user.picture}
                            alt="{$user.name}'s picture"
                        />
                        <span>{$user.name}</span>
                    </a>

                    <div class="navbar-dropdown is-right">
                        <div class="navbar-item">
                            <p>{$user.email}</p>
                        </div>
                        <hr class="navbar-divider" />
                        <a
                            href="/user/logout"
                            class="navbar-item has-text-danger"
                        >
                            Log out
                        </a>
                    </div>
                </div>
            {:else}
                <div class="navbar-item">
                    <a class="button is-primary" href="/user/login">
                        <strong>Log in</strong>
                    </a>
                </div>
            {/if}
        </div>
    </div>
</nav>
