<template lang="pug">
.field.has-addons.data-sheet-search
  //- Search Icon
  .control.data-sheet-nav-control-center
    span.icon.is-small
      i.far.fa-search.is-text-grey(aria-hidden="true")
  .control.is-expanded.data-sheet-nav-control-center
    //- Search
    input.input.data-sheet-search-input(
      @change="updateMatchText"
      :value="matchText"
      placeholder="Search"
    )
</template>

<script>
export default {
  name: 'DataSheetSearch',
  props: ['updateMatchText', 'matchText'],
  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>
