<template>
    <div class="flex-between flex-middle py-1 px-2 topbar">
        <router-link v-if="authUser" :to="'/profile'" class="flex-middle avatar-box">
            <Avatar :avatar="authUser.data.attributes.avatar" size="small" :alt="authUser.data.attributes.name" class="mr-1"/>
            {{ authUser.data.attributes.name }}
        </router-link>
        <form v-if="authUser && search" class="search-box">
            <input type="search" name="search" placeholder="Search">
            <button type="submit" value="S">
                <svg-vue icon="search" />
            </button>
        </form>
        <router-link to="/dashboard" v-if="authUser" class="mr-1">
            <svg-vue icon="params" />
        </router-link>
        <router-link v-else to="/login">
            Se connecter
        </router-link>
    </div>
</template>

<script>
    import { mapGetters } from 'vuex'
    import Avatar from "./Avatar";

    export default {
        name: "TopBar",
        components: {
            Avatar
        },
        data: function () {
            return {
                search: false,
            }
        },
        computed: {
            ...mapGetters({
                authUser: 'authUser',
            })
        }
    }
</script>
