<template lang="pug">
.field.is-grouped(v-if="Object.keys(filters.active).length > 0")
  .control.has-text-weight-bold Filters:
  .control
    .field.is-grouped.is-grouped-multiline
      .control(
        v-for="(filter, name) in filters.active"
        :key="name"
      )
        .tags.has-addons
          .tag.is-link {{ name }}
          .tag.is-delete(@click.prevent.stop="filters.remove(name)")
</template>

<script>
export default {
  name: 'DataSheetFilters',
  props: ['filters'],
  data () {
    return {}
  }
}
</script>

<style>
</style>
