<template>
    <b-navbar toggleable="lg" type="dark" variant="dark" fixed="top">
        <b-navbar-brand to="/">
            <img src="/build/images/24unix/24_logo_bg_96x96.png" alt="24unix.net" id="site-logo">
        </b-navbar-brand>

        <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

        <b-collapse id="nav-collapse" is-nav>

            <!--
            <b-nav-form>
                <b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input>
                <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
            </b-nav-form>
            -->
            <!--
            <b-nav-item-dropdown text="Lang" right>
                <b-dropdown-item href="#">EN</b-dropdown-item>
                <b-dropdown-item href="#">ES</b-dropdown-item>
                <b-dropdown-item href="#">RU</b-dropdown-item>
                <b-dropdown-item href="#">FA</b-dropdown-item>
            </b-nav-item-dropdown>
            -->
            <b-navbar-nav class="ml-auto mr-5">
                <b-button v-if="!isLoggedIn" to="/form_login">Login</b-button>
                <b-dropdown v-else id="dropdown" :text="user.username" class="m-md-2" type="dark">
                    <b-dropdown-item to="/profile">
                        <span class="fa fa-lg fa-fw fa-user" aria-hidden="true"></span>&nbsp;Profile
                    </b-dropdown-item>
                    <b-dropdown-item>
                        <span class="fa fa-lg fa-fw fa-wrench" aria-hidden="true"></span>&nbsp;Settings
                    </b-dropdown-item>
                    <b-dropdown-divider></b-dropdown-divider>
                    <b-dropdown-item @click="logout">
                        <span class="fa fa-lg fa-fw fa-sign-out" aria-hidden="true"></span>&nbsp;Logout
                    </b-dropdown-item>
                </b-dropdown>
            </b-navbar-nav>
        </b-collapse>
    </b-navbar>
</template>

<script>
import axios from "axios";


export default {
    name: "Navbar",
    props: ["user"],
    computed: {
        isLoggedIn() {
            return !!this.user;
        }
    },
    methods: {
        logout() {
            console.log("logout");
            axios
                .get("/logout")
                .then(this.$emit("invalidate-user"));
        }

    }
};
</script>

<style>
</style>

