<template>
    <div class="l-menu__bar">
        <div class="l-menu__close">
            <button v-bind:class="[{active: isButtonActive}, 'c-close',  'c-close--dark']"
                    @click.prevent="toggleFilters"
                    aria-expanded="true" aria-controls="menu-bar" tabindex="-1">
            </button>
        </div>

        <div class="l-menu__breadcrumbs">
            <slot name="breadcrumb"></slot>
        </div>

        <training-filters v-on:loadTrainingsTunnel="loadTrainingsTunnel">
            <template slot="pin-icon">
                <slot name="pin-icon"></slot>
            </template>
        </training-filters>

    </div>
</template>

<script>
    import {store,mutations} from "../main"

    export default {
        name: "filterBar",

        computed: {
            isButtonActive() {
                return store.isFiltersBarActive
            }
        },
        methods: {
            toggleFilters() {
                mutations.toggleFiltersBar()
            },
            loadTrainingsTunnel() {
                this.$emit('load-trainings');
            },
        },
    }
</script>