<template>
    <div>
        <v-snackbar :timeout="0" color="error" :value="visible" top>
            <v-list color="error" dense>
                <v-list-item v-for="(error, index) in errors" :key="index" dense>
                    <v-list-item-title class="caption" style="color: white;">
                        {{error.message}}
                    </v-list-item-title>
                </v-list-item>
            </v-list>
            <v-btn icon color="white" @click="deleteErrors">
                <v-icon>
                    mdi-close
                </v-icon>
            </v-btn>
        </v-snackbar>
    </div>
</template>

<script>
    import { mapGetters, mapActions } from 'vuex'
    export default {
        name: "ConnectionError",
        methods: {
            ...mapActions({
                deleteErrors: 'connectionError/deleteErrors'
            })
        },
        computed: {
            ...mapGetters({
                errors: 'connectionError/errors',
                visible: 'connectionError/visible'
            })
        }
    }
</script>

<style scoped>

</style>
