<template>
  <div class="entity-search">
    <input
      type="text"
      placeholder="Search"
      class="search-entity input-radius"
      v-model="query"
      @input="changed"
    />
    <button
      class="enstract-button text-center button-radius"
      @click="fetch"
    >
      <i class="far fa-search"></i>
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      query: "",
    };
  },
  methods: {
    changed() {
      if (this.query.length <= 0) {
        this.fetch(1);
      }
      this.$emit("input", this.query);
    },
    fetch(page) {
      this.$emit("fetchEntities", 1);
    },
  },
};
</script>