<script setup>
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'

  const searchterm = ref("");
  const router = useRouter();

  function onSearchClick() {
    if (typeof searchterm.value === "undefined" || searchterm.value === "") {
      return
    }
    router.push('/search/' + searchterm.value);
  }
</script>

<template>
  <div class="navbar-item">
    <div class="field has-addons">
      <div class="control">
        <input v-model="searchterm" @keyup.enter="onSearchClick()" class="input" type="text" />
      </div>
      <div class="control">
        <button @click="onSearchClick()" class="button">
          <span class="icon" title="Search">
            <b-icon-search />
          </span>
        </button>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
