<template lang="pug">
.field.has-addons.data-sheet-search
  //- Search Icon
  .control.data-sheet-nav-control-center
    slot(
      name="pre-search-column"
      :matchText="matchText"
    )
      span.icon.is-small
        i.far.fa-filter.is-text-grey(aria-hidden="true")
  .control.is-expanded.data-sheet-nav-control-center
    //- Search
    input.input.data-sheet-search-input(
      @keyup.enter="updateMatchText"
      :value="matchText"
      :placeholder="searchPlaceholder"
      :disabled="isDisabled"
    )
  .control.data-sheet-nav-control-center
    slot(name="post-search-column")
</template>

<script>
export default {
  name: 'DataSheetSearch',
  props: ['updateMatchText', 'matchText', 'searchPlaceholder', 'isDisabled'],
  data () {
    return {}
  }
}
</script>

<style lang="stylus">
.data-sheet-search > .data-sheet-nav-control-center > .data-sheet-search-input
  box-shadow none
  border none
  border-bottom 1px solid $light-grey
.data-sheet-search > .data-sheet-nav-control-center > .icon > i.far
  position relative
  top 2px
</style>
