<template>
    <div class="top-bar flex justify-between bg-orange-300">
        <router-link v-if="authUser" :to="'/profile'" class="flex items-center m-2">
            <Avatar :avatar="authUser.data.attributes.avatar" size="small" :alt="authUser.data.attributes.name" class="w-10 h-10"/>
            <span class="ml-2 hover:text-orange-900">{{ authUser.data.attributes.name }}</span>
        </router-link>
        <form v-if="authUser && search" class="m-2">
            <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="text-orange-600 hover:text-orange-800">
            <svg-vue icon="params" class="w-10 m-2 fill-current" />
        </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>
