<template>
    <div class="filter-bar noselect">
        <Icon icon="filter" />

        <Filters
            class="filters-container"
            :filter="filter"
            @set-filter="filter => $emit('set-filter', filter)"
        />

        <v-popover class="filters-compact">
            <div>Filters</div>

            <div slot="popover">
                <Filters
                    :compact="true"
                    :filter="filter"
                    @set-filter="filter => $emit('set-filter', filter)"
                />
            </div>
        </v-popover>
    </div>
</template>

<script>
import Filters from './filters.vue';

export default {
    components: {
        Filters,
    },
    props: {
        filter: {
            type: Array,
            default: () => [],
        },
    },
};
</script>

<style lang="scss" scoped>
@import 'theme';

.filter-bar {
    background: $background;
    display: block;
    padding: .5rem 1rem;
    font-size: 0;
    box-shadow: 0 0 3px $shadow;

    .icon {
        fill: $shadow;
    }
}

.filters-container {
    display: inline-block;
}

.filters-compact {
    font-size: 1rem;
    font-weight: bold;
    display: none;
    margin: 0 0 0 .5rem;
}

@media(max-width: $breakpoint) {
    .filters-container {
        display: none;
    }

    .filters-compact {
        display: inline-block;
    }
}
</style>
