<template>
    <div class="flex-between flex-center py-1 px-2 topbar">
        <router-link v-if="authUser" :to="'/profil'" 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" class="search-box">
            <input type="search" name="search" placeholder="Search">
            <button type="submit" value="S">
                <svg-vue icon="search" />
            </button>
        </form>
        <div v-if="authUser">
            <router-link to="/dashboard" class="mr-1">
                <svg-vue icon="params" />
            </router-link>
            <a href="#" @click.prevent="logout" class="nav-link">
                <svg-vue icon="logout" />
            </a>
        </div>
        <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
        },
        computed: {
            ...mapGetters({
                authUser: 'authUser',
            })
        },
        methods: {
            logout: function () {
                axios.post('logout')
                    .then(res => {
                        if(res.status ===302 || 401) {
                            window.location.href = '/login'
                        }
                    }).catch(error => {

                })
            }
        }
    }
</script>
