<template>
    <v-app-bar
            app
            flat
            clipped-left
            absolute
            color="blue accent-4"
            class="elevation-4"
            dark>

        <v-btn icon>
            <v-img src="@/assets/logo-big.png" contain height="40"></v-img>
        </v-btn>
        <v-toolbar-title>WU5-Dashboard</v-toolbar-title>
        <v-spacer/>
        <v-btn icon v-if="isFinanzer" href="finanzer">
            <v-icon>attach_money</v-icon>
        </v-btn>
        <v-btn icon v-if="isBar" href="bar">
            <v-icon>local_bar</v-icon>
        </v-btn>
        <v-btn v-if="isLoggedIn" @click="logout">Logout</v-btn>
    </v-app-bar>
</template>

<script>
    import {mapActions} from "vuex";

    export default {
        name: "TitleBar",
        computed: {
            isBar() {
                try {
                    return this.$store.getters.getGroup.includes('bar') ? true : false
                } catch (e) {
                    return false
                }
            },
            isFinanzer() {
                try {
                    return this.$store.getters.getGroup.includes('moneymaster') ? true : false
                } catch (e) {
                    return false
                }
            },
            isLoggedIn() {
                return this.$store.getters.getToken
            }
        },
        methods: {
            ...mapActions([
                'logout'
            ])
        }
    }
</script>

<style scoped>

</style>
